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

WS002907
このエントリーをはてなブックマークに追加
PR

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;
}
PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)