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.

Summer Icon Pack (ai)

iconsFree download

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>Free download</span>

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!

I'm a front-end developer, WordPress developer and trainer. Otherwise coding, cooking and doing yoga. Polish, married to a french guy Joe Vains with whom we live in the very center of Paris.
Follow @PeHaa on twitter and on CodePen.


Comments (1)

Leave a reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.