News

How to build animated and responsive CSS buttons

Find out how to style dynamic icon buttons that behave wholly responsively across modern browsers

anmatedCSSbuttons

Find out how to style dynamic icon buttons that behave wholly responsively across modern browsers

DOWNLOAD TUTORIAL FILES

Responsive icon button

Inspired by similar examples found on the featured site, we’ll show you how to build a responsive animated icon button. Compatible with all modern browsers and IE9+, additional fallbacks for other browsers can be simply implemented. The full code can be found on the resource CD and at bit.ly/18aLoVS.

DOM element

We begin by putting our icon into the DOM of our HTML page. This is simply a content box

with a link inside containing an SVG image. We’ve used an SVG to make it respond nicely, but this could be a PNG file if required. The content box CSS class resizes the element to 50% of the document width.

Style the button

The button has a border and inner shadow, which fades in later, 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. The button is kept responsive while retaining a perfect circle shape by using a percentage value for its width, zero height and a percentage value for padding.

001 .icon {
 002 -webkit-transition: all 0.4s ease;
 003 transition: all 0.4s ease;
 004 display: block;
 005 position: relative;
 006 width: 35%;
 007 height: 0;
 008 padding-bottom: 35%;
 009 margin: 0 auto;
 010 background: #3480a3;
 011 box-shadow: inset 3px 2px 6px rgba(0, 0, 0, 0), 0 0 0 3px #6ca4bd;
 012 border-radius: 50%;
 013 }
 014 .icon:before {
 015 -webkit-transition: all 0.4s ease;
 016 transition: all 0.4s ease;
 017 content: ‘’;
 018 position: absolute;
 019 top: -8px;
 020 left: -8px;
 021 right: -8px;
 022 bottom: -8px;
 023 border: 1px solid #316480;
 024 border-radius: 50%;
 025 }

Style the icon

The icon itself needs to be centralised while still remaining responsive. Making the width a percentage value means it will resize with the button itself. It is then rendered centralised via absolute positioning and by translating it to 50% of its own size within a transform.

001 .icon img {
 002 border: 0;
 003 position: absolute;
 004 top: 50%;
 005 left: 50%;
 006 width: 70%;
 007 -webkit-transition: all 0.4s ease;
 008 transition: all 0.4s ease;
 009 -webkit-transform: translate(-50%, -50%);
 010 -ms-transform: translate(-50%, -50%);
 011 transform: translate(-50%, -50%);
 012 }

Add hover styles

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.

001 .icon:hover,
 002 .icon:active {
 003 background: rgba(52, 128, 163, 0.7);
 004 box-shadow: inset 3px 2px 6px
 rgba(0, 0, 0, 0.25), 0 0 0 5px #6ca4bd;
 005 }
 006 .icon:hover:before,
 007 .icon:active:before {
 008 top: -12px;
 009 left: -12px;
 010 right: -12px;
 011 bottom: -12px;
 012 border: 3px solid #316480;
 013 }
 014 .icon:hover img,
 015 .icon:active img {
 016 width: 64%;
 017 }

A pronounced effect

When it comes to larger screens, we would desire a more pronounced animation effect. This can be achieved by adding a media query to our CSS with a minimum width of 768px, supplying new style properties based more relatively to those target devices.

001 /* Greater animation for larger screens */
 002 @media (min-width: 768px) {
 003 .icon:hover,
 004 .icon:active {
 005 box-shadow: inset 3px 2px 6px rgba(0, 0, 0, 0.25), 0 0 0 10px #6ca4bd;
 006 }
 007 .icon:hover:before,
 008 .icon:active:before {
 009 top: -20px;
 010 left: -20px;
 011 right: -20px;
 012 bottom: -20px;
 013 border: 4px solid #316480;
 014 }
 015 }
×