How to Create Animated and Responsive Buttons with CSS3

, , Leave a comment

How to Make Animated and Responsive Buttons with CSS3

Today I’m going to share how to create interactive animated button with CSS3. The idea is to create an animated link elements with hover effects and active states. Please note that this example will work only on browsers that support CSS3 properties.

See the Demo

Markup

The HTML markup structure is pretty straightforward: the icon will be an image and link.

 

<div class="contentBox">     <a class="icon" href="#"> <img id="img7507" alt="“Location”" src="http://www.sendesignz.com/Icon01.png"> </a> </div> 

 

CSS

This is the outer content box.

.contentBox{ width: 50%; margin: auto; padding: 2em 0; background: #072c40; }

 

Style the button

I used percentage to keep the button responsive. The button has a border and inner shadow. Both created using multiple box-shadows. A third outer border is created using an absolutely positioned pseudo-element as we want a transparent gap between.

.icon {   -webkit-transition: all 0.4s ease;   transition: all 0.4s ease;   display: block;   position: relative;   width: 35%;   height: 0;   padding-bottom: 35%;   margin: 0 auto;   background: #3480a3;   box-shadow: inset 3px 2px 6px rgba(0, 0, 0, 0), 0 0 0 3px #6ca4bd;   border-radius: 50%;  }  .icon:before {  -webkit-transition: all 0.4s ease;  transition: all 0.4s ease;  content: '';  position: absolute;  top: -8px;  left: -8px;  right: -8px;  bottom: -8px;  border: 1px solid #316480;  border-radius: 50%;  }

 

 

Style the icon

.icon img {  border: 0;  position: absolute;  top: 50%;  left: 50%;  width: 70%;  -webkit-transition: all 0.4s ease;  transition: all 0.4s ease;  -webkit-transform: translate(-50%, -50%);  -ms-transform: translate(-50%, -50%);  transform: translate(-50%, -50%);  }

 

 

To add animation effects we darken the background and fade in the inner shadow, while widening and expanding the button borders. At the same time, the icon image is set to shrink in width by 64% during mouse hover. You can obviously use your imagination to apply more style tricks as required.

.icon:hover, .icon:active {  background: rgba(52, 128, 163, 0.7);  box-shadow: inset 3px 2px 6px rgba(0, 0, 0, 0.25), 0 0 0 5px #6ca4bd;  }  .icon:hover:before, .icon:active:before {  top: -12px;  left: -12px;  right: -12px;  bottom: -12px;  border: 3px solid #316480;  }  .icon:hover img, .icon:active img {  width: 64%;  }    .icon:hover, .icon:active {  background: rgba(52, 128, 163, 0.7);  box-shadow: inset 3px 2px 6px rgba(0, 0, 0, 0.25), 0 0 0 5px #5c8a9e;  }  .icon:hover:before, .icon:active:before {  top: -12px;  left: -12px;  right: -12px;  bottom: -12px;  border: 3px solid #316480;  }  .icon:hover img, .icon:active img {  width: 64%;  }

 

 
Share this: