Keyboard Button Effect

June 24, 2013

Lastly, I spent a few time to improve call-to-action buttons on Dexem corporate website and PPC landing pages. My goals were pretty simple - improve conversion rate and better integrate these buttons in our layout - but the ways to reach them were not really trivial. After several tries and weeks of tests, I finally end up with the following flat animated call-to-action buttons. Here's how to build them.

In order to animate the button like this, we will use positionning, box-shadow and transition in the CSS. We have to define an initial state, a final state and a transition between them. In our initial state, the button will be positionned 0px to the top and with a 4px box-shadow. In our final state, the button will be positionned 4px to the top and with no box-shadow. We add a 0.2s transition effect which is activated when someone clicks on the button.

Feel free to use this kind of buttons in your own pages. Get source code on Github or simply copy/paste the code below.