A few days ago we posted on our Google+ page a GIF in which we showed you a collection of CSS hover effects we made. Some people asked us for the source code and today we are going to teach you how the effect works

DEMO SOURCE FILE

The markup

Before talking about the CSS we need to set up some HTML. All you need is an a tag or a button with three classes.
The first class, which is .button-link, is required to setup the default style of the button.
The second one allow you do define the colors of the tag. We created two themes which are .dark and .light (take a look at the demo as reference).
The last class define the effect itself. We designed 12 different hover effects. You just need to choose one and add the respective class (.effect1, .effect2...).

EFFECT1

The CSS effect

Now let's take a look at the code for the effect itself. We are going to talk only about the effect 1 (the others are nearly the same). We need to set the style of the ::before and ::after selectors. We have to position them as absolute and then put the before at the top and the after at the bottom with the top, bottom, left and right properties.
It is also important to set the height and width of the component to create the effect.

/* Default button style */
  .button-link {
    display: inline-block;
    position: relative;
    padding: 15px 36px;
    font: 15px myFontText;
    text-decoration: none;
    background: none;
    z-index: 1;

    -webkit-transition: color 0.7s linear; /* Safari */
    transition: color 0.7s linear;
  }

/* Different color theme: dark and light */
  .dark {
    color: #6C404B;
    border: 1px solid #6C404B;
  }

  .dark::after, .dark::before {
    background: #6C404B;
  }

  .light {
    color: #ffffff;
    border: 1px solid #ffffff;
  }

  .light::after, .light::before {
    background: #ffffff;
  }

:hover

The effect starts on the :hover event. We just need to change the height of the button with a transition (0.6s ease). For the effect1 we have to give to both the before and the after selectors an height of 50%, which means that they will cover an half of the button.

/* EFFECT 1 */
  .effect1::after, .effect1::before {
    position: absolute;
    content: "";
    z-index: -1;

    -webkit-transition: height 0.6s ease; /* Safari */
    transition: height 0.6s ease;
  }

  .effect1::before {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
  }

  .effect1::after {
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
  }

  .effect1:hover::before, .effect1:hover::after {
    height: 50%;
  }

.dark:hover {
    color: #ffffff;
  }

  .light:hover {
    color: #6C404B;
  }

All the others effects have the same setup. You just need to change the width and/or the height of the selectors on hover.