Learn and share. The simplest harmony.

 

CSS3 Pictogram Button

Posted 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 :

Advantages

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.)

Usage

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.


   Button 

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!

 

This Post Tags :

Bookmark Post :

Pin It
  • nice and useful…

  • Great! I love this style of button, with the little icons at the side. Good job :)

  • Very useful and so nice looking :) Congratulations!

  • great! and awesome!

  • So nice, I RT it absolutely ! I’m also now subscriding your feed :)

    • Thank you so much! Glad you enjoy them :)

  • @all thank you so much!

  • Looks Great thanks a lot!
    Whats the font on your picture? The describe font?
    Thank you ;)

  • I didn’t see a license section in the source code or our site. How are you licensing these files?

    • It’s free to use or modified both commercial and personal.
      Credit will be appreciated.

  • Thank you for these great buttons..

  • Thank you for great article Hidayet. I will use in my new boostrap!

  • By the way, if I am not mistaken, you used “Nuri Şahin” picture in your avatar! If it’s not, you can be twin of Nuri Şahin :)

    • Haha, you got it right, I’m his fan :)

  • These buttons look awesome ;)
    BTW, is there any way to intergrate them to WordPress and the MCE Editor?

  • Wow,Amazing buttons,I like it very much~

  • Keren mas bro,,, apalagi yang beveled button punya,,,
    Ciamik dah,,,!!!
    :D

  • Thanks for this awesome set of buttons! Could you please let me know what is the licence type?

    • It’s free to use or modified both commercial and personal.
      Credit will be appreciated.

  • Very nice. Is it a problem if I use this css to set style to the submit input without icon?

    • Of course there’s no problem.

  • Lovely effect, very nice. The rounded button doesn’t work in IE9, though. You can see the rouding, but the corners are not “clipped”. I would never complain about IE6, 7, or 8, but 9 is pretty standards compatible. Your Beveled and Rectangle series work perfectly, however, so thanks for getting those to work; many designers don’t bother with checking IE.

  • Great stuff! Just found this on webappers.com and can use it today on a project! Thanks!

    Any way to pass an “inactive” param to the class and not have it animate or change cursor style?

  • really nice thanks, add to my collection

  • Great, I’d love to see a Twitter Bootstrap version of this.

  • wow. no needed an image. it’s great. beautiful buttons :)

  • Awesome!

  • Its great!

  • Really love this buttons.

    If you don’t mind I would give a constructive criticism. The class names I think shouldn’t be like “orange”, “black”, etc…
    If in some point of the project we decide to change the button colours we have two options: replace the name everywhere (and being so common it could be dangerous) or having classes named orange and being black.

    Anyway the main purpose of this post is to say: THANKS!

  • Its great.. i like the Beveled Buttons.

  • Thanks. Nice buttons. Just need to work out how to display them in WordPress.

  • Uoou! Great Job! Thank You!
    Obrigado! Ótimo trabalho!

  • Really nice buttons, very nice.

  • Great buttons and nice syntax. Rounded buttons don’t work in IE9 on Win7

  • So nice bottuns and congratulations for the site and the good taste of designes.
    Greetings from Jacarei-São Paulo-Brazil

  • great!! Thanks a lot!

  • Amazing buttons…
    Great job
    Thanks

  • Wow persembahan orang Indonesia. Salam kenal masbro. Mantab button nya.

  • Great :)

  • Sweet! Bravo!

  • ini keren mas,boleh minta code untuk tulisan Webstuffshare,text shadow nya keren.
    saya dari madura!
    di bales ya mas…..
    trimakasih…..

    • .logo a:hover {
      text-shadow: -5px -5px 0px rgba(0, 0, 0, 0.15);
      }

      .logo a {
      text-shadow: 1px 5px 0px rgba(0, 0, 0, 0.15);
      color: white;
      text-decoration: none;
      border-bottom: 0px;
      transition: .3s linear;
      }

  • thanks they’re really cool

  • Hey thanks! that’s really cool and helps!

  • it’s great in firefox but it doesn’t work in IE. :-(

  • Dont function on IE8.

  • Nice CSS buttons, will try it on my blog.