activeのアクションが良い、ちょっと変わったアニメーション付きのボタン『Change text on :hover and :active』

Change text on :hover and :active
By Jintos

DEMO 表示

こういうのタイプのボタンは初めて見ました

ボタンをマウスオーバーすると、文字がすり替わり、さらにクリックしている状態でさらに文字がすり替わるというものです。hoverとactiveですり替わる文字はhtmlの方でdataとしてタグに埋め込んでおき、それをCSSのcontentで呼び出しているので、ボタンを幾つか作ってテキストの内容をそれぞれ変えたいときにはCSSを触ること無く変えることとが出来るのも良いアイディアです

HTML

<button class="button" type="button" data-hover="CLICK ME" data-active="I'M ACTIVE"><span>HOVER EFFECT</span></button>

CSS(SCSS)

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    text-align: center;
    background: #00C8FF;
}

p {
    font-size: 1.6em;
    font-family: 'Lato', sans-serif;
    background-color: #fff;
    padding: 1em;
    color: #002240;
    margin-top: 0;
}

/* .button */

.button {
    display: inline-block;
    position: relative;
    margin: 1em;
    padding: 0.67em;
    border: 2px solid #FFF;
    overflow: hidden;
    text-decoration: none;
    font-size: 2em;
    outline: none;
    color: #FFF;
    background: transparent;
    font-family: 'raleway', sans-serif;
}

.button span {
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    -o-transition: 0.6s;
    transition: 0.6s;
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

.button:before,
.button:after {
    content: '';
    position: absolute;
    top: 0.67em;
    left: 0;
    width: 100%;
    text-align: center;
    opacity: 0;
    -webkit-transition: .4s,opacity .6s;
    -moz-transition: .4s,opacity .6s;
    -o-transition: .4s,opacity .6s;
    transition: .4s,opacity .6s;
}

/* :before */

.button:before {
    content: attr(data-hover);
    -webkit-transform: translate(-150%,0);
    -moz-transform: translate(-150%,0);
    -ms-transform: translate(-150%,0);
    -o-transform: translate(-150%,0);
    transform: translate(-150%,0);
}

/* :after */

.button:after {
    content: attr(data-active);
    -webkit-transform: translate(150%,0);
    -moz-transform: translate(150%,0);
    -ms-transform: translate(150%,0);
    -o-transform: translate(150%,0);
    transform: translate(150%,0);
}

/* Span on :hover and :active */

.button:hover span,
.button:active span {
    opacity: 0;
    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    -ms-transform: scale(0.3);
    -o-transform: scale(0.3);
    transform: scale(0.3);
}

/*  
    We show :before pseudo-element on :hover 
    and :after pseudo-element on :active 
*/

.button:hover:before,
.button:active:after {
    opacity: 1;
    -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    -ms-transform: translate(0,0);
    -o-transform: translate(0,0);
    transform: translate(0,0);
    -webkit-transition-delay: .4s;
    -moz-transition-delay: .4s;
    -o-transition-delay: .4s;
    transition-delay: .4s;
}

/* 
  We hide :before pseudo-element on :active
*/

.button:active:before {
    -webkit-transform: translate(-150%,0);
    -moz-transform: translate(-150%,0);
    -ms-transform: translate(-150%,0);
    -o-transform: translate(-150%,0);
    transform: translate(-150%,0);
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}