Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save hadyfayed/8660746 to your computer and use it in GitHub Desktop.
Save hadyfayed/8660746 to your computer and use it in GitHub Desktop.
A Pen by Mads Hensel.

Buttons with or without icon. No extra tags.

Add the icon to the button. No need for extra tag with the icon inside. Same tag with or with text. Supported in IE9+ and other modern browser.

A Pen by Mads Hensel on CodePen.

License.

<h3>A tag</h3>
<a class="btn">Button</a>
<a class="btn entypo-export">Button</a>
<a class="btn entypo-export"></a>
<br />
<h3>Button tag</h3>
<button class="btn">Button</button>
<button class="btn entypo-export">Button</button>
<button class="btn entypo-export"></button>
@import "compass";
// Supported in IE9+, Chrome, Firefox
// Button style
.btn {
box-sizing: border-box;
transition: border-color 0.2s, color 0.2s;
background-color: #FFF;
border: 1px solid #CCC;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
color: #4D4D4D;
font-family: "Open Sans", sans-serif;
font-weight: 700;
font-size: 1em;
padding: 0 1em;
display: inline-block;
vertical-align: middle;
line-height: 2.6; // Height of button
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
text-transform: uppercase;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
&:hover,
&:focus {
transition: border-color 0.2s, color 0.2s;
border-color: #3498db;
color: #3498db;
text-decoration: none;
}
// If button has an icon
&[class*="entypo-"] {
&:before {
display: inline-block;
font-family: 'entypo', sans-serif;
font-weight: normal;
font-size: 1em;
vertical-align: -1px;
margin-right: 0.6em;
}
// Check if button is empty and remove the margin-right
&:empty {
&:before {
margin-right: 0;
}
}
}
}
// Presentation styles don't use
body {
padding: 4em;
font-family: "Open Sans", sans-serif;
}
.btn {
margin: 1em;
}
h3 {
display: inline-block;
width: 8em;
}
// End presentation style
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment