CSS ボタンのホバーアニメ

ボタンにマウスを合わせた時の斜めに色がつくアニメーションのサンプルです。

CSSのhoverやfocusで発動するボタンのエフェクトのサンプルを用意しました。

デザインで調整をすることが多いため、わかりやすくシンプルなCSSにしています。

HTML


<a href="#" class="demo_btn"><span class="demo_gradient"></span>ボタンサンプル</a>

spanの要素が文字の背景となり、グラデーションの色を斜めにつけています。

アニメーションの動きは、縦長の長方形になっているspanを上下に移動させています。

CSS

.demo_btn{
    display: block;
    width: 200px;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    transform: translatez(0);
    text-decoration: none;
    text-align: center;
    box-sizing: border-box;
    font-size: 18px;
    padding: 26px;
    border: 1px solid #DDD;
    color: #1a1a1a;
    transition: all 0.5s ease-in-out 0s;
}


.demo_btn .demo_gradient {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 800%;
    bottom: auto;
    margin: auto;
    z-index: -1;
    background: #6086c1;
    background: linear-gradient(45deg, #333 0%, #000 49%, #FFF 50%, #EEE 100%);
    transition: all 0.5s ease-in-out 0s;
    transform: translateY(0%);
}

.demo_btn:hover,
.demo_btn:focus {
    text-decoration: none;
    border: 1px solid #72b4d3;
    color:#FFF;
}

.demo_btn:hover .demo_gradient,
.demo_btn:focus .demo_gradient {
    transform: translateY(-85%);
}

spanが z-index = -1 で、overflow ではみ出た部分が隠れています。

位置や色を調整するといろんなバリエーションを作ることができます。