Awesome CSS3 buttons with smooth animation

Today I will show you the steps to create, style and animate buttons using only css3. No image, here we are only using simple gradient colors for backgrounds. I hope already you know, css3 has a great power of styling and can produce awesome effects just like flash. More over CSS3 doesn’t require heavy code or image for producing smooth animation. May be only day css3 will take place of Flash. So, lets start today’s tutorial.

Notes:I’ve tested following buttons in all major browsers. But Still IE versions not supports HTML5 and CSS3. Hope, CSS3 and HTML5 will work in IE10.

There 5 different color(Simple, Green, Red, Purple, Orange) sets and 5 different sizes(Small, Medium, Large, Xlarge, XXLarge) buttons. You just need to add class name according to your need. Very simple and re-useable classes.

Simple CSS3 Button:

CSS:

.button-container {
    float: left;
    margin: 10px 10px 10px 10px;
}
.btn{
    font-family: 'Anaheim', sans-serif;
    border: 1px solid lightslategray;
    cursor: pointer;
    padding: 5px;
    border-width: 2px;
    border-style: solid;
    border-color: activecaption;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    color: #000000;
    font-weight: bold;
    box-shadow: 1px 0 1px rgba(0, 0, 0, 0.5);
}

.btn:hover{
    background: lightgray;
    color: #FFFFFF;
}

.small{
    width: 60px;
    font-size: 13px;
}

.medium{
    width: 120px;
    font-size: 15px;
}
.large{
    width: 180px;
    font-size: 18px;
}

.xlarge{
    width: 220px;
    font-size: 21px;
}

.xxlarge{
    width: 250px;
    font-size: 25px;
}

.rounded-corner{
    border-radius: 6px 6px 6px 6px;
}

.cross-rounded-corner{
    border-radius: 0px 6px 0px 6px;
}

HTML MARKUP:

<div class="button-container">
    <h2>Demo 1</h2>
    <button class="btn small" name="button">Button</button>
    <button class="btn medium" name="button">Button</button>
    <button class="btn large" name="button">Button</button>
    <button class="btn xlarge" name="button">Button</button>
    <button class="btn xxlarge" name="button">Button</button>
</div>
<div class="button-container">
    <h2>Demo 2 Rounded Corner</h2>
    <button class="btn rounded-corner small" name="button">Button</button>
    <button class="btn rounded-corner medium" name="button">Button</button>
    <button class="btn rounded-corner large" name="button">Button</button>
    <button class="btn rounded-corner xlarge" name="button">Button</button>
    <button class="btn rounded-corner xxlarge" name="button">Button</button>
</div>
<div class="button-container">
    <h2>Demo 3 Cross Rounded Corner</h2>
    <button class="btn cross-rounded-corner small" name="button">Button</button>
    <button class="btn cross-rounded-corner medium" name="button">Button</button>
    <button class="btn cross-rounded-corner large" name="button">Button</button>
    <button class="btn cross-rounded-corner xlarge" name="button">Button</button>
    <button class="btn cross-rounded-corner xxlarge" name="button">Button</button>
</div>