A CodePen by Johanna Ruiz. CSS Generated Content Buttons - I wanted to experiment with icon fonts and pseudo-elements to create some buttons. The buttons and content are generated purely with css. Using the before and after pseudo-elements and the css "content" attribute, the icon and button name have been injected into the DOM using CSS.

CSS transitions have been applied to the pseudo-elements, to create a subtle hover transition, but only pseudo element transitions currently only work in the current stable version of Firefox and in the developer build of Chrome 26 (Canary or Chromium)

Thank you to Tim Pietrusky and http://weloveiconfonts.com

Show some support and go vote for his project to get free lifetime hosting http://bit.ly/UAjyco