Create Beautiful CSS3 Image-less Buttons

By rgracia on Saturday, 02/04/2012

So I have been wanting to post a tutorial on how to make those beautiful buttons we see on Flickr's homepage. So here's a very basic rundown on how it's done with CSS3

Essentially we have a box that serves as the parent of second box which wiill be positioned "absolute" inside of it. In this case we have a parent DIV with class of imgbanner and its positioning set to "relative". The child of that DIV with class of promo will be set to "absolute" positioning.
The promo DIV contains the button DIV with class of mybutton. From there h3 and h1 elements are allowed to behave normally as blocks withing their containing boxes and applied CSS3 text shadows, color, padding and margins to create the beautiful, clean effects.
The magic of the button is of course, the CSS3 rounded corners treatment paired with a gradient applied to its background, and some box shadow. All the CSS Code follows.

Boxes and CSS Code

These classes have been modified to suite the dimensions of my site's content area for the blog post, but you get the idea. All values can be changed to suit your needs. Have fun!

DIV code
<div class="imgbanner">
   <div class="promo">
       <h1>
           It is Winter People...</h1>
       <div class="mybutton">
           <h3>
               <a href="#">Click Me Please!</a></h3>
           <div>
               <span>Some Additional Promo Text</span></div>
       </div>
   </div>
</div>
CSS Classes
/* Blogpost Tutorials Styles */

.imgbanner .promo .mybutton {
    width: 250px;
}

.imgbanner .promo .mybutton {
    background: -moz-linear-gradient(center top , #F5F5F3 0pt, #D6D6D6 100%) repeat scroll 0 0 transparent;
   background: -webkit-gradient(linear,0% 0,0% 100%,from(#F5F5F3),to(#D6D6D6));
   background: linear-gradient(center top , #F5F5F3 0pt, #D6D6D6 100%) repeat scroll 0 0 transparent;
   filter: progid:DXImageTransform.Microsoft.gradient
                   (startColorstr='#F5F5F3', endColorstr='#D6D6D6');
   background-color: rgb(214, 214, 214);
   -moz-border-radius: 10px 10px 10px 10px;
   -webkit-border-radius: 10px 10px 10px 10px;
   -o-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    display: block;
    margin: 10px auto 0;
    position: relative;
}

#content .imgbanner .promo .mybutton h3 {
   color: #FE63BB;
   font-family: "Myriad Pro", myriad, arial, sans-serif;
   font-size: 27px;
   font-weight: bold;
   margin: 0;
   padding: 15px 0 0;
   text-shadow: 0 1px 0 #FFFFFF;
   text-transform: none;
}

.imgbanner .promo .mybutton div {
    padding: 0 0 10px;
}

.imgbanner .promo {
    left: 250px;
    position: absolute;
    text-align: center;
    top: 150px;
    width: 390px;
}

.imgbanner .promo h1 {
   color: #FFFFFF;
   font-family: "Helvetica Neue", helvetica, arial, sans-serif;
   font-size: 37px;
   font-weight: bold;
   letter-spacing: 0;
   line-height: 1em;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
   text-transform: none;
}

.imgbanner {
   float: left;
   height: 347px;
   margin: 0 auto 10px;
   overflow: hidden;
   position: relative;
   text-align: center;
   width: 640px;
   background-image: url(/sites/default/files/blog/cold.jpg);
   background-repeat: no-repeat;
   background-position: center center;
   border: 1px solid #CCCCCC;
}

.imgbanner .promo .mybutton h3 a, .imgbanner .promo .mybutton h3 a:hover {
    background: none repeat scroll 0 0 transparent;
    color: #FE63BB;
    text-decoration: none;
}

.imgbanner .promo .mybutton span {
    font-size: 11px;
    font-weight: bold;
}

Tags:

CSS3

text-shadow

border-radius

box-shadow

Create Beautiful CSS3 Image-less Buttons

Click Me Please!