Here is a free set of 43 buttons with three different styles (Beveled, Rectangle and Rounded) and six different colors (Orange, Magenta, Cyan, Red, Black and Green) and using the Entypo webfont pictograms for replacing the images.

CSS3 3D Buttons
CSS3 3D Buttons

Here are some advantages on using this sets :

  1. No images, all buttons using CSS and font.
  2. Using Animation for changing button states.
  3. Flexible, you can choose or even change the button size or style.
  4. 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.

<a class="button orange" href="#">

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 afterbutton class.


View Demo:

Related Posts