Lewis Winstone

Navigation Bar Header Carousel
Default Button Dropdown Button Block Level Button Active/Disabled Button Icon Button Ghost Button
Jumbotron Footer Grid Layouts

Icon Buttons

An Icon button is a regular button with an icon features on it most commonly they feature both an icon and text, their purpose is too help the user have a clearer understanding of the function of the button such as adding a home icon to a home button that takes the user back to the websites homepage.

Example

HTML

<button class="iconbutton" type="button"><img src="icon.png" alt="home icon">Home</button>

CSS

.iconbutton { background-color: #33cccc; color: black; text-align:center; height: 80px; width: 100px; border-radius: 2px; } .iconbutton:hover{ background-color: white; }