CSS3 Pictogram ButtonPosted on May 29, 2012 and got 48 shouts so far
If you follow my previous post about how to use pictogram for replacing image you must be familiar with this freebie I want to share. This is a set of 43 button with three different styles and six different colors and using entypo pictogram for replacing the images. Go through the post to see the entire sets.
Entypo & The Buttons
I am using Daniel Bruce’s entypo webfont for the image on the button, not taking all the pictograms but 43 that I think commonly used. Beside contains these 43 pictograms this sets also can be used using three different styles : Beveled, Rectangle and Rounded. While there are six colors you can choose : Orange, Magenta, Cyan, Red, Black and Green. Here is some of them :
Those buttons also have three different states : normal, hover and active :
Here are some advantages on using this sets :
- No images, all buttons using CSS and font.
- Using Animation for changing button states.
- Flexible, you can choose or even change the button size or style.
- Any container element can be applied (a, button, span, div, input, etc.)
Include pictogram-button.css and put font/ folder to the right place. There are two elements needed to create the button, first element is any container element and the second is a span.
On the first element you must put class name button for rectangle, button-bevel for beveled followed by the class name of the color. For second element, the span, you must put any class name that representative the pictogram (see the demo). For rounded add class rounded after button class.
That’s it. Please enjoy!