Animated Buttons with CSS3

Still hyped by the possibilities of CSS3, I want to share some CSS3 button experiments with you. The idea is to create some animated link elements with different styles, hover effects and active states.

AnimatedButtons

View demo Download source

Still hyped by the possibilities of CSS3, I want to share some CSS3 button experiments with you. The idea is to create some animated link elements with different styles, hover effects and active states.

The icons used in some of the examples are by webiconset.com and the symbol font is by Just Be Nice

We’ll go through every example and see how the HTML structure looks and what the styles for the normal, the hover and the active states are.

Please note that the animations/transitions will only work in browsers that support those CSS3 properties.

In order not to bloat the tutorial, I will not be using any CSS vendor prefixes. The downloadable files contain them, of course.

Example 1

AnimatedButtons_01
In this example we will create a big button with several details in it. It will have an icon, a main text, an arrow on the right side and a price that will only appear when we hover.

Markup

The structure is pretty straightforward: the icon will be an image and the other elements will be spans:

<a href="#" class="a-btn">
	<span class="a-btn-slide-text">$29</span>
	<img src="images/icons/1.png" alt="Photos" />
	<span class="a-btn-text"><small>Available on the Apple</small> App Store</span> 
	<span class="a-btn-icon-right"><span></span></span>
</a>

CSS

In the style we will make sure that the right transitions are set on the element that we want to animate on hover. The price will be invisible by setting its opacity to 0. Applying mulitple box shadows will allow us to create realistic effects:

.a-btn{
    background: linear-gradient(top, #a9db80 0%,#96c56f 100%);
    padding-left: 90px;
    padding-right: 105px;
    height: 90px;
    display: inline-block;
    position: relative;
    border: 1px solid #80ab5d;
    box-shadow: 
		0px 1px 1px rgba(255,255,255,0.8) inset, 
		1px 1px 3px rgba(0,0,0,0.2);
    border-radius: 4px;
    float: left;
    clear: both;
    margin: 10px 0px;
    overflow: hidden;
    transition: box-shadow 0.3s ease-in-out;
}
.a-btn img{
    position: absolute;
    left: 15px;
    top: 13px;
    border: none;
    transition: all 0.3s ease-in-out;
}
.a-btn .a-btn-slide-text{
    position: absolute;
    font-size: 36px;
    top: 18px;
    left: 18px;
    color: #6d954e;
    opacity: 0;
    text-shadow: 0px 1px 1px rgba(255,255,255,0.4);
    transition: opacity 0.2s ease-in-out;
}
.a-btn-text{
    padding-top: 13px;
    display: block;
    font-size: 30px;
    text-shadow: 0px -1px 1px #80ab5d;
}
.a-btn-text small{
    display: block;
    font-size: 11px;
    letter-spacing: 1px;
}
.a-btn-icon-right{
    position: absolute;
    right: 0px;
    top: 0px;
    height: 100%;
    width: 80px;
    border-left: 1px solid #80ab5d;
    box-shadow: 1px 0px 1px rgba(255,255,255,0.4) inset;
}
.a-btn-icon-right span{
    width: 38px;
    height: 38px;
    opacity: 0.7;
    border-radius: 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -20px 0px 0px -20px;
    border: 1px solid rgba(0,0,0,0.5);
    background: #4e5c50 url(../images/arrow_down.png) no-repeat center center;
    box-shadow: 
        0px 1px 1px rgba(255,255,255,0.3) inset, 
        0px 1px 2px rgba(255,255,255,0.5);
    transition: all 0.3s ease-in-out;
}

When hovering over the buttons we will to change their box shadow and we’ll show the price and fade out the icon:

.a-btn:hover{
    box-shadow: 
        0px 1px 1px rgba(255,255,255,0.8) inset, 
        1px 1px 5px rgba(0,0,0,0.4); 
}
.a-btn:hover img{
    transform: scale(10);
    opacity: 0;
}
.a-btn:hover .a-btn-slide-text,
.a-btn:hover .a-btn-icon-right span{
    opacity: 1;
}

The active state will make the button looked pressed with an inset shadow. The arrow icon on the right will be enlarged:

.a-btn:active {
    position:relative;
    top:1px;
    background:#80ab5d;
    box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    border-color: #a9db80;
}
.a-btn:active .a-btn-icon-right span{
    transform: scale(1.4);
}

Example 2

AnimatedButtons_02
The second example will be very similar to the first one, just that we’ll add some different effects.

Markup

The markup on this example will be the same like in example 1.

CSS

The styles are almost the same like in example 1, we will just adapt the colors. But, we will do something different on hover. We will make the price scale to its original size (before we have set it to 0) and the icon will disappear. The arrow span will get a red background color:

.a-btn:hover{
    box-shadow: 
        0px 1px 1px rgba(255,255,255,0.8) inset, 
        1px 1px 5px rgba(0,0,0,0.4); 
}
.a-btn:hover img{
    opacity: 0;
}
.a-btn:hover .a-btn-slide-text{
    opacity: 1;
    transform: scale(1);
}
.a-btn:hover .a-btn-icon-right span{
    opacity: 1;
    background-color: #bc3532;
}

The active state will be the same like in the previous example. We will only change the colors. When we press the button, we will also rotate the arrow icon:

.a-btn:active {
    position: relative;
    top: 1px;
    background: #5d81ab;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.4) inset;
    border-color: #80a9da;
}
.a-btn:active .a-btn-icon-right span{
    transform: rotate(360deg);
}

Example 3

AnimatedButtons_03
In this example we will try something completely different. The button will expand down on hover and reveal another message. The arrow icon will slightly rotate.

Markup

The markup in example 3 will be slightly different than in the previous examples. The text that will slide down will be in the span with the class “a-btn-slide-text”:

<a href="#" class="a-btn">
	<span class="a-btn-text">Register now</span> 
	<span class="a-btn-slide-text">Get a promotion</span>
	<span class="a-btn-icon-right"><span></span></span>
</a>

CSS

In the normal state the button is going to have a specific height that we’ll animate on hover in order to reveal the additional message. The additional message of “a-btn-slide-text” will be positioned absolutely and we will animate its height from 0 to 30px on hover.

.a-btn{
    background: linear-gradient(top, #feda71 0%,#febb4a 100%);
	border: 1px solid #f5b74e;
    border-color: #f5b74e #e5a73e #d6982f;
    box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #fee395;  
    padding: 0px 80px 0px 10px;
	height: 38px;
	display: inline-block;
	position: relative;
	border-radius: 4px;
	float: left;
	margin: 10px;
	overflow: hidden;
	transition: all 0.3s linear;
}
.a-btn-text{
	padding-top: 5px;
	display: block;
	font-size: 18px;
	white-space: nowrap;
	color: #996633;
    text-shadow: 0 1px 0 #fedd9b;
	transition: all 0.3s linear;
}
.a-btn-slide-text{
	position:absolute;
	top: 35px;
	left: 0px;
	width: auto;
	right: 52px;
	height: 0px;
	background: #fff;
	color: #996633;
	font-size: 13px;
	white-space: nowrap;
	font-family: Georgia, serif;
	font-style: italic;
	text-indent: 15px;
	overflow: hidden;
	line-height: 30px;
	box-shadow: 
		-1px 0px 1px rgba(255,255,255,0.4), 
		1px 1px 1px rgba(0,0,0,0.5) inset;
	transition: height 0.3s linear;
}
.a-btn-icon-right{
	position: absolute;
	right: 0px;
	top: 0px;
	height: 100%;
	width: 52px;
	border-left: 1px solid #f5b74e;
	box-shadow: 1px 0px 1px rgba(255,255,255,0.4) inset;
}
.a-btn-icon-right span{
	width: 38px;
	height: 38px;
	opacity: 0.7;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -20px 0px 0px -20px;
	background: transparent url(../images/arrow_right.png) no-repeat 50% 55%;
    transition: all 0.3s linear;
}

On hover we will change the heights of the button and the additional text element. We’ll also rotate the arrow icon 45 degrees:

.a-btn:hover{
	height: 65px;
	box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4); 
}
.a-btn:hover .a-btn-text{
	text-shadow: 0px 1px 1px rgba(0,0,0,0.2);
	color: #fff;
}
.a-btn:hover .a-btn-slide-text{
	height: 30px;
}
.a-btn:hover .a-btn-icon-right span{
	opacity: 1;
	transform: rotate(-45deg);
}

The active state will move the button a bit and adjust the colors so that the button seems pressed:

.a-btn:active {
	position:relative;
	top:1px;
	background: linear-gradient(top, #fec354 0%,#fecd61 100%); /* W3C */
    border-color: #d29a3a #cc9436 #c89133;
    text-shadow: 0 1px 0 #fee1a0;
    box-shadow: 0 1px 1px #d4d4d4, inset 0 1px 0 #fed17e;  
}

Example 4

AnimatedButtons_04
In example 4, we will slide out some additional message just like in the previous example, but we will do that horizontally to the right side. This will seem as if the button opens up to reveal the message inside.

Markup

The Markup of this example is the same like in the previous one.

CSS

Similar to the previous example, the button style will be the following. What we will change is the colors and the position of the additional text element:

.a-btn{
    background: linear-gradient(top, #80a9da 0%,#6f97c5 100%);
    padding-left: 20px;
    padding-right: 80px;
    height: 38px;
    display: inline-block;
    position: relative;
    border: 1px solid #5d81ab;
    box-shadow: 
		0px 1px 1px rgba(255,255,255,0.8) inset, 
		1px 1px 3px rgba(0,0,0,0.2), 
		0px 0px 0px 4px rgba(188,188,188,0.5);
    border-radius: 20px;
    float: left;
    clear: both;
    margin: 10px 0px;
    overflow: hidden;
    transition: all 0.3s linear;
}
.a-btn-text{
    padding-top: 5px;
    display: block;
    font-size: 18px;
    white-space: nowrap;
    text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
    color: #446388;
    transition: all 0.2s linear;
}
.a-btn-slide-text{
    position:absolute;
    height: 100%;
    top: 0px;
    right: 52px;
    width: 0px;
    background: #63707e;
    text-shadow: 0px -1px 1px #363f49;
    color: #fff;
    font-size: 18px;
    white-space: nowrap;
    text-transform: uppercase;
    text-align: left;
    text-indent: 10px;
    overflow: hidden;
    line-height: 38px;
    box-shadow: 
		-1px 0px 1px rgba(255,255,255,0.4), 
		1px 1px 2px rgba(0,0,0,0.2) inset;
    transition: width 0.3s linear;
}
.a-btn-icon-right{
    position: absolute;
    right: 0px;
    top: 0px;
    height: 100%;
    width: 52px;
    border-left: 1px solid #5d81ab;
    box-shadow: 1px 0px 1px rgba(255,255,255,0.4) inset;
}
.a-btn-icon-right span{
    width: 38px;
    height: 38px;
    opacity: 0.7;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -20px 0px 0px -20px;
    background: transparent url(../images/arrow_right.png) no-repeat 50% 55%;
    transition: all 0.3s linear;
}

On hover we will increase the right padding of the button and also the width of the “a-btn-slide-text” span:

.a-btn:hover{
    padding-right: 180px;
    box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
}
.a-btn:hover .a-btn-text{
    text-shadow: 0px 1px 1px #5d81ab;
    color: #fff;
}
.a-btn:hover .a-btn-slide-text{
    width: 100px;
}
.a-btn:hover .a-btn-icon-right span{
    opacity: 1;
}

The active state will again look pressed with the help of an inset shadow and an additional pixel down:

.a-btn:active {
    position: relative;
    top: 1px;
    background: #5d81ab;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.4) inset;
    border-color: #80a9da;
}

Example 5

AnimatedButtons_05
In this example we will be using a symbol font for the icons. The idea is to make the displayed icon disappear and show an arrow animation while hovering.

Markup

The structure will consist of 4 span elements inside of the button link. The span with the class “a-btn-slide-icon” will be the animated arrow that will move from up to down.

<a href="#" class="a-btn">
	<span class="a-btn-symbol">Z</span>
	<span class="a-btn-text">Download Now</span> 
	<span class="a-btn-slide-text">Windows Vista / Windows 7</span>
	<span class="a-btn-slide-icon"></span>
</a>

CSS

Since we will be using a font to display the icons on the left side, we will have to include the font.
We will hide the arrow by setting it’s top value to -30px.

@font-face {
    font-family: 'WebSymbolsRegular';
    src: url('websymbols/websymbols-regular-webfont.eot');
    src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
        url('websymbols/websymbols-regular-webfont.woff') format('woff'),
        url('websymbols/websymbols-regular-webfont.ttf') format('truetype'),
        url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
.a-btn{
    border-radius: 50px;
    padding: 10px 30px 10px 70px;
    position: relative;
    float:left;
    display: block;
    overflow: hidden;
    margin: 10px;
    background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 74%,rgba(237,237,237,1) 100%);
    box-shadow: 
        0px 0px 7px rgba(0,0,0,0.2), 
        0px 0px 0px 1px rgba(188,188,188,0.1);
    transition: box-shadow 0.3s ease-in-out;
}
.a-btn-symbol{
    font-family: 'WebSymbolsRegular', cursive;
    color: #555;
    font-size: 20px;
    text-shadow: 1px 1px 2px rgba(255,255,255,0.5);
    position:absolute;
    left: 20px;
    line-height: 32px;
    transition: opacity 0.3s ease-in-out;
}
.a-btn-text{
    font-size: 20px;
    color: #d7565b;
    line-height: 16px;
    font-weight: bold;
    font-family: "Myriad Pro", "Trebuchet MS", sans-serif;
    text-shadow: 1px 1px 2px rgba(255,255,255,0.5);
    display: block;
}
.a-btn-slide-text{
    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #555;
    text-shadow: 0px 1px 1px rgba(255,255,255,0.9);
}
.a-btn-slide-icon{
    position:absolute;
    top:-30px;
    width: 22px;
    height: 22px;
    background: transparent url(../images/arrow_down_black.png) no-repeat top left;
    left:20px;
    opacity: 0.4;
}

On hover we will fade out the icon on the left and play the animation for the arrow infinitely:

.a-btn:hover{
    background: #fff;
    box-shadow: 
        0px 0px 9px rgba(0,0,0,0.4), 
        0px 0px 0px 1px rgba(188,188,188,0.1);
}
.a-btn:hover .a-btn-symbol{
    opacity: 0;
}
.a-btn:hover .a-btn-slide-icon{
    -webkit-animation: slideDown 0.9s linear infinite;
}

When pressing the button, we will make the button red and look pressed by giving it an inset shadow:

.a-btn:active{
    background: #d7565b;
    box-shadow: 
        0px 2px 2px rgba(0,0,0,0.6) inset, 
        0px 0px 0px 1px rgba(188,188,188,0.1);  
}
.a-btn:active .a-btn-text{
    color: #fff;
    text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}
.a-btn:active .a-btn-slide-text{
    color: rgba(0,0,0,0.4);
    text-shadow: none;
}

And finally, the simple animation for moving the arrow from up to down:

@keyframes slideDown {
    0% { top: -30px; }
    100% { top: 80px;}
}

Example 6

AnimatedButtons_06
Let’s go wild here. Let’s do a circular button with a star in it! We will, of course, make the star rotate on hover (with slight pulse, oh yeah!) and make an additional text appear.

Markup

We will have three spans in our button link. The last one will be the hidden text that shows on hover.

<a href="#" class="a-btn">
	<span></span>
	<span>Sign up</span>
	<span>It's free!</span>
</a>

CSS

We’ll play a bit with nth-child in this example. Since we have 3 spans, we’ll need to address them as .a-btn span:nth-child(1), .a-btn span:nth-child(2) and .a-btn span:nth-child(3).

We’ll make the button circular and add some really fancy box shadows to it. In order to center the main text vertically, we will set its display to table-cell. The star and the hidden text will be positioned absolutely.

.a-btn{
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: block;
    margin: 20px;
    float: left;
    background: #f0ad4e;
    position: relative;
    box-shadow:    
        0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset,
        0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset,
        0px 0px 0px 7px #fff, 
        0px 0px 1px 8px rgba(188, 188, 188, 0.4),
        0px 0px 0px 9px #fff;
    transition: all 0.3s linear;
}
.a-btn span{
    display: table-cell;
    width: 80px;
    height: 80px;
    padding: 20px;
    text-align: center;
    vertical-align: middle;
    font-size: 26px;
    color: #fff;
    text-shadow: 0px 1px 1px #A03F16;
    font-family: "Arvo", "Myriad Pro", "Trebuchet MS", sans-serif;
    transition: all 0.3s linear;
}
.a-btn span:nth-child(1), 
.a-btn span:nth-child(3){
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 40px;
    line-height: 36px;
    opacity: 0;
}
.a-btn span:nth-child(1){
    background: transparent url(../images/star.png) no-repeat center center;
    opacity: 0.2;
}

On hover we will change the box shadow of the button so that it appears lifted. The hidden text will be faded in and we’ll apply the flyOut animation to the initial text. We’ll apply the rotate animation to the star:

.a-btn:hover{
    background: rgba(170, 77, 27, 0.6);
    box-shadow:    
        0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset,
        0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset,
        0px 0px 0px 7px #fff, 
        1px 4px 5px 8px rgba(188, 188, 188, 0.6),
        0px 0px 0px 9px #fff;
}
.a-btn:hover span:nth-child(3){
    opacity: 1; 
}
.a-btn:hover span:nth-child(2){
        transform: scale(0);
    opacity: 0; 
}
.a-btn:hover span:nth-child(1){
    animation: rotate 1s linear; 
}

Let’s make the button look pressed when clicking on it:

.a-btn:active{
    box-shadow:    
        0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset,
        0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset,
        0px 0px 0px 7px #fff, 
        0px -1px 0px 8px rgba(188, 188, 188, 0.3),
        0px 0px 0px 10px #fff;
}
.a-btn:active span:nth-child(2){
    color: rgba(170, 77, 27, 0.8);
    text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6);
}

The rotate/pulse animation looks as follows:

@-webkit-keyframes rotate{
    0% { transform: scale(1) rotate(0);}
    50% { transform: scale(0.5) rotate(180deg);}
    100% { transform: scale(1) rotate(360deg);}
}

Example 7

AnimatedButtons_07
In the last example we’ll create a bit of a 3D look by the use of some nifty box shadow.

Markup

The structure will be the same like in example 5.

CSS

The style will be very similar to example 5, we’ll just adjust some colors and shadows:

.a-btn{
    border-radius: 10px;
    padding: 10px 30px 10px 70px;
    position: relative;
    float:left;
    display: block;
    overflow: hidden;
    margin: 10px;
    background: linear-gradient(top, #b7f2f4 0%,#7ce7ea 100%);
    border: 1px solid #90c6c8;
    border-color: #90c6c8 #78bdc0 #65b6ba;
    box-shadow: 
		0px -5px 0px 0px #458a8c, 
		0 1px 1px #d5d5d5, 
		0 1px 0 rgba(255,255,255,0.8) inset;  
    transition: all 0.2s linear;
}
.a-btn-symbol{
    font-family: 'WebSymbolsRegular', cursive;
    color: #437b7d;
    text-shadow: 0 1px 0 #bef3f5;
    font-size: 20px;
    position:absolute;
    left: 20px;
    width: 20px;
    text-align: center;
    line-height: 32px;
    transition: all 0.3s ease-in-out;
}
.a-btn-text{
    font-size: 20px;
    color: #437b7d;
    text-shadow: 0 1px 0 #bef3f5;
    line-height: 16px;
    font-weight: bold;
    font-family: "Myriad Pro", "Trebuchet MS", sans-serif;
    display: block;
}
.a-btn-slide-text{
    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #555;
    text-shadow: 0px 1px 1px rgba(255,255,255,0.9);
}

On hover we will enlarge the button and rotate the little icon:

.a-btn:hover{
    transform: scale(1.05);
}
.a-btn:hover .a-btn-symbol{
    opacity: 0.5;
    transform: rotate(360deg);
}

When clicking the button, we will make the button smaller and press it by adjusting the box shadow:

.a-btn:active{
    transform: scale(0.95);
    box-shadow: 
        0px 0px 0px 1px #458a8c, 
        0 1px 1px #d5d5d5, inset 0 1px 0 rgba(255,255,255,0.8),
        0px 1px 1px 2px #fff;  
}

And that’s it! I hope you enjoyed creating some crazy buttons with CSS3 and got inspired!

Some References

Add to Cart Buttons (PSD)
Simple CSS3 Button
Ultimate CSS Gradient Generator

View demo Download source

Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://tympanus.net/

Related Articles

Feedback 77

Comments are closed.
  1. 1

    Very nice work. I always come here for the good stuff and Mary Lou you always have it. I took example 3 and using php “lighter” and “darker” functions, I re-coded all the css hex values with variables so that play off any one hex color value.

    This will change the entire menu to any color and still look great. I have made this my default menu now and I love it. I can change to any color in seconds and it works well with all browsers. Have a look http://lenfarneth.com Thanks for a great tutorial.

  2. 2

    Hi, I’m curious if anyone can explain how to scale the button by about twice the size. I tried fooling around with the CSS in Dreamweaver and Chrome Dev Tools but couldn’t get the desired results…

  3. 4

    Its nice to see so many people sharing their love for buttons, and animated buttons certainly look nice. But most of the time the animation is just a hover-over effect.

    I wanted to have something that moves all the time to attract user attention – like a glowing button. In the end I came up with the following CSS3 Glowing Button featuring a button that has a radial glow on top of it. Providing a more subtile glow effects that attracts user attention to the button. However it is far from finished am sure that some one can take the concept and apply it to a better designed button.

  4. 5

    Wow, a great collection! They all are appealing. It is worth applying them to the web page.

  5. 9

    There is some really cool CSS animation going on here. I really like the demos and am looking to create a similar sort of effect when I go onto my new development. They are just so natural and not in your face I really like how you have done it. Well done!

  6. 12

    Hello Mary, nice tutorial and demos, could you tell me please how can I implement these buttons to an HTML Nav menu?

  7. 15

    Excellent buttons buddy. . I like them very much. . But i wanted to know thing – can i publish this css trick on my blog post with your author attribution??. . My blog is of niche “Blogger Tricks”

    Regards,
    Vijay

  8. 16

    I’m a beginner teaching myself this using Dreamweaver. I have managed to get a single button to work in every way except the font — mine displays a serif font instead of the font displayed in the example.

    Help!

Comments are closed.