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);
}