CSS Text Button Design With Icon

HTML Markup
Element Markup
a <span class="button"><a href="#">TEXT</a></span>
button <span class="button"><button type="button">TEXT</button></span>
input <span class="button"><input type="submit" value="TEXT" /></span>
with icon <span class="button icon"><span class="check"></span><button type="button">TEXT</button></span>
Used Classes
Variation Mixable Class Name
declaration button, button+icon
size small, medium, large, xLarge
strong strong
icon check, add, delete, calendar, refresh
Button : Text
Element small medium large xLarge
a anchor anchor anchor anchor
button
input
Button : Check Icon
Element small medium large xLarge
a anchor anchor anchor anchor
button
input
Button : Add Icon
Element small medium large xLarge
a anchor anchor anchor anchor
button
input
Button : Delete Icon
Element small medium large xLarge
a anchor anchor anchor anchor
button
input
Button : Calendar Icon
Element small medium large xLarge
a anchor anchor anchor anchor
button
input
Button : Refresh Icon
Element small medium large xLarge
a anchor anchor anchor anchor
button
input