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.

The HTML - Very very basic.

1
2
3
<div class="container">
        <a href="" class="button">Get in Touch</a>
</div>

The CSS - A bit more complex but quite easy too.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/* -- Keyboard button effect -- */
.container {
    margin: 30px auto;
}
.container a.button {
    background: none repeat scroll 0 0 #244F84;  /* -- Change button color here -- */
    border-radius: 6px 6px 6px 6px;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 400;
    padding: 12px 66px;
    text-decoration: none;
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}
.container a.button, .container a.button:hover {
  color:#FFFFFF;  /* -- Change text color here-- */
}
.container a.button.border {
    position:relative;
    top:0;
    box-shadow: 0 4px 0 #BDC3C7; /* -- Change border bottom color here-- */
}
.container a.button.border:active {
    top:4px;
    box-shadow:none;
}

Enjoyed the article?

I'm sharing what I build and learn on SaaS products strategy and SaaS distribution. And I'm learning a lot, so will you! Delivered once a month for free.

I won't spam you or sell your address. Unsubscribe - of course - at any time.