Buttons with icons - Could still use some work but a pretty cool start

index.html

<a class="btn  btn--icon  btn--favorite" href=#><i>$</i><span>Favorite</span></a>

<a class="btn  btn--icon  btn--add" href=#><i>+</i><span>Add</span></a>

<a class="btn  btn--icon  btn--delete" href=#><i>×</i><span>Delete</span></a>

<a class="btn  btn--icon" href=#><i>More</i><span>Default</span></a>

<a class="btn  btn--add" href=#><span>Iconless</span></a>

style.css

/* Base */
html {
    padding: 0.125em;
    font-size: 200%;
}



/* Button */
.btn {
    margin: 0.25em;
    float: left;
    clear: both;
    font-family: monospace;
    white-space: nowrap;
}



/* Button elements */
.btn > span,
.btn--icon > i {
    padding: 0.5em 1em;
    display: inline-block;
    transition: 0.25s all;
}
.btn > span {
    border-radius: 0.25em;
    white-space: nowrap;
    color: #222;
    background: #ddd;
}
.btn:hover > span,
.btn:focus > span {
    background: lightgreen;
}
.btn:active > span {
    background: limegreen;
    transition: none;
}



/* Button with an icon */
.btn--icon > i {
    border-radius: 0.25em 0 0 0.25em;
    position: relative;
    font-weight: bold;
    font-style: normal;
    color: white;
    background: #222;
}
.btn--icon > i:after {
    content: "";
    border: 0.35em solid;
    border-color: transparent transparent transparent #222;
    position: absolute;
    top: 0.775em;
    right: -0.65em;
}
.btn--icon:hover > i,
.btn--icon:focus > i {
    color: #ddd;
}
.btn--icon > span {
    border-radius: 0 0.25em 0.25em 0;
}



/* Button custom states */
.btn--favorite:hover > i,
.btn--favorite:focus > i { color: gold; }
.btn--add:hover > i,
.btn--add:focus > i { color: lightblue; }
.btn--delete:hover > i,
.btn--delete:focus > i { color: orangered; }
.btn--favorite > span { background: gold; }
.btn--add > span { background: lightblue; }
.btn--delete > span { background: orangered; }