DesignLovr

Beautiful Photoshop-like Buttons with CSS3

One of the elements on a web page that a visitor’s attention is drawn to first is in many cases a button. Whether it is a “Add to cart”, “Leave a comment” or “Subscribe” button, they all are designed to stand out from the rest of the design and make the visitor click on them. Unfortunately buttons are image-based in 99% of the cases and the use of complicated CSS sprites is often required to fluently switch between different states of interaction, but a new age dawns with the arrival and broader browser-support of CSS3.

In this Tutorial we’ll show you how to recreate 3 different, slick buttons that we created beforehand in Photoshop without the usage of any image in CSS3. We’ll use a multitude of CSS3 properties, such as @font-face, text- and box-shadow, gradients and border-radius.

Button #1

Button #1

Photoshop

This simple, yet beautiful and effective button is based on a rounded, 250px wide and 34px high rectangle (the dimensions are the same for all buttons in this tutorial) with a border-radius of 5px. The following layer styles were applied to the button:

Button #1 Blending Options

The font used for the text is Airstream, which is licensed for the usage with @font-face. Its size is set to 30px, a very light blue (#e5edff) is used as color and a simple drop-shadow (as shown below) is applied to it.

Button #1 Text Blending Options

CSS3

Because the HTML part of the code is very simple I’m not giving any code examples for that. All you need is a HTML document that refers to your CSS file and has an input tag with an id (in our case a submit button with the id button1).

We start by defining our new, custom font-family with @font-face. Check out our 30 Beautiful and Free Fonts You Can Use with @font-face post to find out more about @font-face and how to implement it.

The styling of the input tag starts with some general and regular CSS properties such as height, width, border and background, followed by the CSS3 Styling.
We begin with the creation of a linear CSS3 Gradient for Firefox as well as Webkit Browsers.

Remark

CSS3 Gradients are implemented quite differently by Gecko and Webkit Browsers. The -moz- version of CSS3 Gradients is much easier, even though Firefox supports them only since its latest release (3.6). It is almost impossible to create a nice radial gradient for Webkit Browsers (I got it working with a trial and error method).

I don’t want to go into details because there is enough material for a separate article, but here are some good resources for those of you that are a little more interested: CSS Gradients in Firefox 3.6, Introducing CSS-Gradients (Safari), Radial Gradient Generator and Linear Gradient Generator.

After that we define the border-radius to achieve the rounded corners – this is simple and straightforward, it just needs to be defined separately for Firefox and Webkit Browsers.

Finally we’ll add a soft shadow around the button with box-shadow. The first value indicates the x-offset, the second the y-offset, followed by the blur radius and finally the shadow color.

Quicktip

You might have noticed that I defined alongside with the default properties -moz- and -webkit- also a unpreceded version of the CSS3 properties. This currently doesn’t anything, but should enable the feature in most browsers once CSS3 is officially released and widely implemented. Like this we make our code future-ready.

Finally we only need to set our previously defined font-family (and appropriate fallbacks), its size, color and we’re also adding another CSS3 property: text-shadow.

Text-shadow works similar to box-shadow (x-offset, y-offset, blur radius, color), but in this specific case we used the RGBA model (another CSS3 feature) to define the color. This allows us to define a transparent color to get a softer color (rather than choosing a milder gray, which is absolutely not the same).

RGBA is based on the RGB color model and requires four values: The red, green and blue amounts (between 0 and 255) and the alpha channel (in decimal values, e.g. 0.1 = 10% opacity), which indicates the opacity.


@font-face {
  font-family: 'AirstreamRegular';
  src: url('fonts/Airstream.eot');
  src: local('Airstream Regular'), local('Airstream'), url('fonts/Airstream.ttf') format('truetype');
}

input#button1 {
  /* General Propertoes */
  height:34px;
  width:250px;
  border:1px solid #858fa6;
  background:#4a5775;
  /* CSS3 Styling */
  background:-moz-linear-gradient(top, #606c88, #3f4c6b);
  background:-webkit-gradient(linear, left top, left bottom, from(#606c88), to(#3f4c6b));
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
  -moz-box-shadow:0px 0px 5px #000;
  -webkit-box-shadow:0px 0px 5px #000;
  box-shadow:0px 0px 5px #000;
  /* Text Styling */
  font-family:'AirstreamRegular', Georgia, 'Times New Roman', serif;
  color:#e5edff;
  font-size:30px;
  text-shadow:0px 0px 5px rgba(0, 0, 0, 0.75);
}

Now we have a beautiful button and all that’s missing is some interactivity. That’s why we’re going to define the hover, focus and active state of the button. You can let your creativity run free here and manipulate the values we defined to your own desires. By adding CSS3 transitions you can even add some animation.

Below I lightened the border color for the hover and focus states to highlight the button and reversed the gradient and smalled down the text-shadow in case the user clicks on the button.


input#button1:hover, input#button1:focus {
  border-color:#adbad9;
}
  
input#button1:active {
  background:-moz-linear-gradient(bottom, #606c88, #3f4c6b);
  background:-webkit-gradient(linear, left bottom, left top, from(#606c88), to(#3f4c6b));
  text-shadow:0px 0px 2px #000;
}

Button #2

Button #2

Photoshop

The second button is a little more glossy and might even be a little bit outdated, but it is a great way to show a gradient with more than two colors. The dimensions are the same as the one’s of the first button (250px on 34px), but it uses a radius of 20px for its rounded corners and the following blending options:

Button #2 Blending Options

This time we’re using the HighlandGothic font with a size of 20px and an orange color (#ff7d00). The following drop-shadow is applied to it:

Button #2 Text Blending Options

CSS3

We start once again by defining a new font-family with @font-face, just as we did it with our first button, followed by some general CSS properties.

Next on the list is the more complex gradient with four color values, a bigger border-radius and a box-shadow, which actually is more of an outer glow than a shadow because it uses RGBA to define a white with an opacity of 50%.

The text is styled as before, but due to the negative y-offset of our text-shadow we achieve an effect that resembles an inner-shadow.

Finally we’re defining some styles for the different button states.


@font-face {
  font-family: 'HighlandGothicFLFRegular';
  src: url('fonts/HighlandGothicFLF.eot');
  src: local('HighlandGothicFLF Regular'), local('HighlandGothicFLF'), url('fonts/HighlandGothicFLF.ttf') format('truetype');
}

input#button2 {
  /* General Properties */
  height:34px;
  width:250px;
  border:1px solid #000;
  background:#717a77;
  /* CSS3 Styling */
  background:-moz-linear-gradient(bottom, #0a0809, #0a0f0b 50%, #6d7673 50%, #afbdc0);
  background:-webkit-gradient(linear, left bottom, left top, from(#0a0809), to(#afbdc0), color-stop(0.5, #0a0f0b), color-stop(0.5, #6d7673));
  -moz-border-radius:20px;
  -webkit-border-radius:20px;
  border-radius:20px;
  -moz-box-shadow:0px 0px 7px rgba(255, 255,255, 0.5);
  -webkit-box-shadow:0px 0px 7px rgba(255, 255,255, 0.5);
  box-shadow:0px 0px 7px rgba(255, 255,255, 0.5);
  /* Text Styling */
  color:#ff7d00;
  text-shadow:0px -1px 0px #000;
  font-family:'HighlandGothicFLFRegular', Impact, 'Arial Black', sans-serif;
  font-size:20px;
  padding-bottom:5px;
}

input#button2:hover {
  font-size:21px;
  -moz-box-shadow:0px 0px 7px rgba(255, 255,255, 1);
  -webkit-box-shadow:0px 0px 7px rgba(255, 255,255, 1);
  box-shadow:0px 0px 7px rgba(255, 255,255, 1);
}

input#button2:focus {
  -moz-box-shadow:0px 0px 7px rgba(255, 255,255, 0.75);
  -webkit-box-shadow:0px 0px 7px rgba(255, 255,255, 0.75);
  box-shadow:0px 0px 7px rgba(255, 255,255, 0.75);
}
  
input#button2:active {
  border-width:2px 1px 1px 2px;
  font-size:20px;
}

Button #3

Button #3

Photoshop

Our last button basically explodes with subtlety (or is it implode?) and would fit perfectly into a very simple design without losing its attractiveness.
It has the original dimensions of 250px on 34px, uses a very small radius of 3px and the following layer styles:

Button #3 Blending Options

Note this is the font we used, 24px the font-size and plain white (#fff) the color. A simple outer glow (see image below) helps the button to stand out on the dark background.

Button  #3 Text Blending Options

CSS3

The CSS is similar to the two other buttons, so I’m not going to repeat everything again.

The only difference is the usage of radial gradients instead of linear ones and the usage of a white with an opacity of 50% as text-shadow to recreate the outer glow of the text. The radial gradient is fairly simple to implement for Firefox and nearly impossible in Safari. If nobody is going to write a proper tutorial on how to do this soon I’ll have a deeper look into it and write one on my own.


@font-face {
  font-family: 'NotethisRegular';
  src: url('fonts/Note_this.eot');
  src: local('Note this Regular'), local('Notethis'), url('fonts/Note_this.ttf') format('truetype');
}

input#button3 {
  /* General Properties */
  height:34px;
  width:250px;
  border:1px solid #494949;
  background:#404040;
  /* CSS3 Styling */
  background:-moz-radial-gradient(bottom, #656565, #404040 60%);
  background:-webkit-gradient(radial, center bottom, 0, center 230, 230, from(#656565), to(#404040));
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
  -moz-box-shadow:0px 0px 3px #000;
  -webkit-box-shadow:0px 0px 3px #000;
  box-shadow:0px 0px 3px #000;
  /* Text Styling */
  color:#fff;
  text-shadow:0px 0px 5px rgba(255, 255,255, 0.5);
  font-family:'NotethisRegular', Verdana, Arial, sans-serif;
  font-size:24px;
  padding-top:1px;
}
  
input#button3:hover, input#button3:focus {
  background:-moz-radial-gradient(bottom, #656565, #404040 80%);
  background:-webkit-gradient(radial, center bottom, 0, center 230, 250, from(#656565), to(#404040));
}

input#button3:active {
  -moz-box-shadow:0px 0px 2px #000;
  -webkit-box-shadow:0px 0px 2px #000;
  box-shadow:0px 0px 2px #000;
  text-shadow:0px 0px 8px rgba(255, 255,255, 1);
}

Conclusion

I think that this was quite a good demonstration of how powerful and versatile CSS3 actually is (or is going to be) and how we can avoid the usage of images and CSS sprites with a little bit of code.

These buttons will display properly and in their full beauty in the latest version of Safari, Chrome and Firefox (only 3.6, not 3.5, which doesn’t have support for CSS3 Gradients), but degrade more or less gracefully and display without the CSS3 features in all other browsers, including IE6 (the custom fonts work in all browsers though). Make sure to set regular background-colors before adding the gradients, so it will display properly in all browsers.

Share on Facebook Stumble this post Bookmark on Delicious

Similar Posts

44

Comments so far

  1. Great article ximi. I didn’t know that CSS3 is so advanced. I’ll give it a try.

    • ximi says:

      Thanks for your comment Adrian.

      CSS3 is great, but don’t forget the browsers that aren’t supporting it yet ;)

  2. Vadim says:

    But what if the user don’t have this fonts?

  3. It’s cool. Really cool. In a new browser. But, lets get real. It will be a very long time before we can use CSS3 confidently and know that the vast majority of our users are getting the full experience. IE6 is 9 years old and we still have to provide support for it.

    In the meantime, I’ll stick to photoshop.

    Good demo though. Well done.

    • ximi says:

      You are right, we can’t just start using CSS3 without thinking about older browsers without support, but we can use it already to some extend as long as we make sure that appropriate fallbacks are available.

      In case of these buttons – they work in all browsers, just don’t look the same and I think as long as the functionality is till preserved we can actually use them…

      • I totally agree with you, Ximi. It would be a shame NOT to use CSS3 in IE or some other browser. The only between CSS3 in IE6 and IE8 is that a button can’t have any CSS-generated rounded corners in Internet Explorer 6. And that’s it. I don’t think that’s really a big issue, right?

        As long as the functionality behind the buttons remain, it’s all good with me.

    • If you are worried about this not working in ie6, then check these scripts. Havent tested these my self, but it looks promising

      http://is.gd/9xUS7
      http://is.gd/9xUiT

      • ximi says:

        Thanks for the two links, they’re some interesting scripts!

  4. fede says:

    One little thing.

    In the demo, and the code you have to set cursor: pointer (the little hand), so, the input not only looks like a button and also work like a button :D

    • ximi says:

      Thanks for the tip, I’ll correct that as soon as I have the time to.

  5. M. H. Taha says:

    i really got inspired…hope u continue posting more tutorials, thanks a lot
    hassicho,

  6. Anurag says:

    thanks for the third button. awesome article.
    Anurag´s featured post: Create Multiple Hyperlink on One Link

  7. Sivaranjan says:

    This is incredibly useful , but a little tweaking here and there could give a much nicer effect. I am taking the liberty of adding this article to my css aggregator site at CSSFind.com. Hope thats ok with you.

  8. marwa soft says:

    cooooooool buttons
    marwa soft´s featured post: تحريك عقارب الساعه باستخدام css3 و jquery

  9. Sue says:

    Great buttons – they certainly look very professionally done and will add to any website. Might even convince more people to hit the button.

  10. Dani says:

    Very much of nice post. Very helpfully. Thanks.

  11. jD says:

    nice work, i love the possibilities with css3

  12. Thank you! This is going to be so hand for me!
    Custom Dog Tags´s featured post: Custom Dog Tag Set

  13. That’s an interesting article about CSS3. From the tutorials you’ve shared, I can see that CSS3 is becoming more flexible for the purpose of developers. I’d like to try CSS3 but is it supported by all browsers? Thank you for sharing the short tutorials!

  14. Nice article. It’s interesting what CSS3 can do.
    Web Design Gallery´s featured post: The Wayward Irregular

  15. I just tried one of these pieces of codes in my local computer and see how css3 image-less button looks like and it is really cool. You don’t have to go through a lot of photoshop work. Thanks. This is really useful.

  16. david says:

    The outer glow makes a backround behind. The css3 it is powerful

  17. I like photoshop button style with CSS 3. Lightweight solution!

  18. Mas Uki says:

    Excellent…

  19. danopia says:

    For anyone who is insane about IE support, IE has its own gradient and dropshadow support via the filter property. You could use this to get pretty close IE support for the buttons, though I’m not sure if dropshadows support the alpha channel.

    Some examples:
    filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=2,OffY=2,Color=’black’,Positive=’true’);
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=’#4B3E1A’,EndColorStr=’#FFFFFF’);

  20. Jim says:

    Nifty buttons but I’d have to say the simple grey version you show last doesn’t really strike me as outstanding. I think the shiny one with the rounded edges and the diner-style font looks to me to be the best. Thanks!
    Jim´s featured post: Effect helps businesses optimize web ROI

  21. All the fonts are quite attractive and written beautifully. Good post. Keep posting.

Leave a Reply

CommentLuv Enabled