A Pen by Mads Hensel.

Buttons-with-or-without-icon.-No-extra-tags..markdown

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.

index.html

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

style.scss

@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