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.
<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 |