Sexy CSS Buttons
Being able to get the majority of the mundane stuff that every website needs started quickly is very important to me, because the less stuff I have to do that’s mundane and boring the better. This is why I’ve started a collection of the basic CSS and Javascript code I use on all my websites. I decided to call this collection EUI for Epicserve User Interface. As you can tell I couldn’t think of anything creative to call it so I just used the handle I go by on the internet and then added user interface because it’s code that deals with what people see or the front-end code.
Recently I was working on a website and I needed some better looking buttons for the site. I decided to code up some buttons using pure CSS since this would be faster than creating buttons in Photoshop and then having to make the different buttons hover states, etc. After making the buttons using pure CSS, I decided to add them to my EUI library so that I would have them in my central location for this type of code in order to use them in future projects.
Below are some sample buttons and the HTML and CSS code used to create them. It should be noted that the only browsers that show the buttons 100% purely as intended are Firefox 3.6, Chrome 5 and Safari 5. In Internet Explorer 8 the buttons lose the drop shadow, text shadow and rounded corners.
Sample Buttons
Link Button
Link Button Code
<a class="btn" href="#">My Sample Button</a>
Submit Button
Submit Button Code
<form><input class="btn" type="submit" value="My Sample Button" /></form>
Button CSS Code
/**
* SEXY BUTTONS
* -------------------------------------------------------------------- */
a.btn {
text-decoration: none;
}
a.btn, input[type=submit], input[type=button] {
cursor: pointer;
padding: 10px;
border: none;
border-top: 1px solid #eee;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
background: #ddd; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdddddd', endColorstr='#ff999999'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#999)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ddd, #999); /* for firefox 3.6+ */
color: #444;
-webkit-box-shadow: 1px 2px 2px rgba(0, 0, 0, .5);
-moz-box-shadow: 1px 2px 2px rgba(0, 0, 0, .5);
box-shadow: 1px 2px 2px rgba(0, 0, 0, .5);
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
a.btn:hover, input[type=submit]:hover, input[type=button]:hover {
background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffaaaaaa', endColorstr='#ff444444'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#aaa), to(#444)); /* for webkit browsers */
background: -moz-linear-gradient(top, #aaa, #444); /* for firefox 3.6+ */
color: #fff;
border-top: solid 1px #ccc;
text-shadow: 0 1px 0 rgba(0, 0, 0, .65);
}
a.btn:active, input[type=submit]:active, input[type=button]:active {
background: #444; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444', endColorstr='#ffaaaaaa'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#aaa)); /* for webkit browsers */
background: -moz-linear-gradient(top, #444, #aaa); /* for firefox 3.6+ */
color: #fff;
border-top: solid 1px #999;
text-shadow: 0 1px 0 rgba(0, 0, 0, .8);
}
Related tags: CSS
- Save this article for later, bookmark it!
- del.icio.us digg newsvine blinklist magnolia
Comments are closed.
Comments have been close for this post.
Latest Photos
Good Reading
- Wireless Weather Station with Sun / Moon and Advanced Forecast Icon WS-9611U-IT by La Crosse Technology - Tomorrow's Weather Today
- Five tips for cleaning and speeding up your Mac | How To - CNET
- Smith House Toy and Auction Company - Catalog Lot 232 - Smith House Toy and Auction Company
- Apple iOS 7: Everything You Need to Know
- Podio - YouTube
- The Always Up-to-Date Guide to Managing Your Facebook Privacy
Comments
Quite impressive. Is your EUI available for use by other people on their other projects? I know it is on Github, but just to be sure. The buttons looked very nice, I wish I had the ability to design, but I am so un-creative.
hei, i am indonesian, nice post, i have tried it... thanks..