So you are looking at your PSD layout and thinking to yourself: “These buttons look sharp”. You start to cut them out of the template and realize something horrible! You are wasting kbs of loading time here. You are racking up tenths of a second and losing precious audiences around the globe! So you decide to fulfill the epic buttons by creating them with CSS 3!
Example:
I like to take into account the backwards compatibility which is why you see box shadow done multiple times.
button{
border: 1px solid #8EC1DD;
background-color: #DDEEFF;
border-radius: 4px;
box-shadow: inset 0 1px 3px #fff, inset 0 -15px #cbe6f2, 0 0 3px #8ec1da;
-o-box-shadow: inset 0 1px 3px #fff, inset 0 -15px #cbe6f2, 0 0 3px #8ec1da;
-webkit-box-shadow: inset 0 1px 3px #fff, inset 0 -15px #cbe6f2, 0 0 3px #8ec1da;
-moz-box-shadow: inset 0 1px 3px #fff, inset 0 -15px #cbe6f2, 0 0 3px #8ec1da;
color: #3985a8;
text-shadow: 0 1px #fff;
padding: 5px 30px;
}
What a gorgeous CSS3 button utilizing shadows.
If you were looking to create a more rounded button like…
You would want to increase the ” border-radius: 4px; ” – in my example I used ” border-radius: 10px; ”
The opposite is true if you want to have a square button.
For the above example I used ” border-radius: 1px; ”
Following these simple steps can help eliminate the need for images thus reducing the amount of time needed to execute the loading of your site.
So that is all great with your CSS 3 button, but maybe what you want to do is give that button a hover effect. Well that is simple enough to do.
button:hover{
border: 1px solid #8EC1DD;
background-color: #DDEEFF;
border-radius: 4px;
box-shadow: inset 0 1px 3px #fff, inset 0 -15px #cbe6f2, 0 0 3px #8ec1da;
-o-box-shadow: inset 0 1px 3px #fff, inset 0 -15px #cbe6f2, 0 0 3px #8ec1da;
-webkit-box-shadow: inset 0 1px 3px #fff, inset 0 -15px #cbe6f2, 0 0 3px #8ec1da;
-moz-box-shadow: inset 0 1px 3px #fff, inset 0 -15px #cbe6f2, 0 0 3px #8ec1da;
color: #3985a8;
text-shadow: 0 1px #000;
padding: 5px 30px;
}
In this case I simply changed the ” text-shadow: 0 1px #fff; ” to ” text-shadow: 0 1px #999; ” It doesn’t look as clean, but it definitely emphasizes the text and you can see the color break through.
Think about all of the great possibilities with CSS3 using these techniques. Sure we applied them to buttons, but you could apply this to any object: boxes, dividers, menus, and on.
Stay tuned for more developments on CSS3. My next blog is going to be about CSS3 forms and how to make those forms come alive.
6 Responses
[...] you saw the button tutorial and thought to yourself how could I make this better? Well it would help if you could [...]
If you have any questions feel free to post here.
These have been depreciated -o-box-shadow, -moz-box-shadow, -webkit-box-shadow
While Chrome, Firefox and Opera are moving ahead with CSS3 implementation, it is really surprising that IE is getting left behind. This is one of the big hurdles in implementation of CSS3. Many of the website designers are still sticking with CSS2 due to this.
Hope IE will update itself soon!
[...] you saw the button tutorial and thought to yourself how could I make this better? Well it would help if you could [...]
[...] you saw the button tutorial and thought to yourself how could I make this better? Well it would help if you could [...]