Buy me a coffee. Thanks!

Hello! Today, let’s celebrate the summer time with this simple css3 tutorial. We’ll discuss the hover effect but don’t hesitate to actually press the button – this pretty flat-design icons set by vector4free is free to download in vector format on their site.
Let’s start – hover the “Free download” button below.

Let’s start with the markup. Note that we add the data-title attribute to the link element – its value being exactly the link text.

<a class="button" href="#" data-title="Free download">
  <span>
    <span>Free download</span>
  </span>
</a>

The idea is to have two button layers one over another, looking and positioned exactly the same except for the inverted colors. We’ll use an :after pseudo-element with the content passed via a custom data- attribute.

Note that for the brevity of the code below the vendor prefixes are omitted. You’ll find the complete code in the download files.

We use the Bowlby One SC Google Font.

.button {
  display: block;
  position: relative;
  height: 3.4em;
  width: 10em;
  margin: .7em auto;
  overflow: hidden; }
 
  .button > span {
    display: block;
    position: absolute;
    overflow: hidden;
    left: 0;
    top: 0;
    width: 0%;
    height: 100%;
    transition: 1s ease-in-out; }

/*  .button:after and .button > span > span are identical except for the inverted colors */

  .button:after, .button > span > span {
    display: block;
    text-align: center;
    border-radius: 0.625em;
    padding: 1em 0; }
  .button:after {
    content: attr(data-title);
    width: 100%;
    background: #4186b2;
    color: #67d6c1; } 
  .button > span > span {
    width: 10em;
    background: #67d6c1;
    color: #4186b2; }

 /* what happens on hover */ 
 .button:hover > span {
    width: 100%; }

For a vertical instead of a horizontal effect like below:

you would just have

.button > span {
    ..
    width: 100%;
    height: 0%;
    .. }
 .button:hover > span {
    height: 100%; }

That’s all – hope you got inspired. Thank you.
Enjoy the summer!