【webデザイン】コピペするだけ！押した事が感覚的に分かるエフェクト付き「続きを読む」ボタン

f:id:mshimfujin:20160724195409j:plain

こんにちは、えむしです。

テーマを変更したことで「続きを読む」のボタンがうまく表示されなくなったので思い切ってカスタマイズしてみる事にしました。

完成図と参考にしたサイト
コード
テーマを変更した理由

完成図と参考にしたサイト

f:id:mshimfujin:20160916033118g:plain 挙動はこんな感じです。うちのサイトのボタンを録画したので下のコードを貼り付けた時の色味とは別です。下のコードではグレーに仕上がっています。

ボタンを押した時に、ちゃんと押した感じのするボタンにしたくてこちらを参考にして作りました。

参考にしたのはここのmoema

tympanus.net

コード

きちんとcssを勉強するしたわけではないので、もしかしたら必要のない指定をしているかもしていません。テーマによっては上手く動作しないかもしれないのでご容赦を。

貼り付ける場所はこちら。

f:id:mshimfujin:20160726114748j:plain

cssの欄に以下のコードを貼り付けてください。

/* 続きを読むボタンカスタマイズ */
.entry-content .entry-see-more {
    display: inline-block;
    font-size: 0.875em;
    line-height: 44px; /* Button height */
    min-width: 176px; /* Button width */
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    background: #323232; /* 背景色 */
    border: solid 2px #f4f4ed; /* ボーダー色　ボーダーが要らなければこの行を削除 */
    color: #fff; /* 文字の色 */
    vertical-align: middle;
    position: relative;
    -webkit-backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: background-color 0.3s, color 0.3s;
    transition: background-color 0.3s, color 0.3s;
}

.entry-content .entry-see-more:focus {
    outline: none;
}
.entry-content .entry-see-more::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    bottom: -15px;
    right: -15px;
    background: inherit;
    z-index: -1;
    opacity: 0.4;
    -webkit-transform: scale3d(0.8, 0.5, 1);
    transform: scale3d(0.8, 0.5, 1);
}
.entry-content .entry-see-more:hover {
    -webkit-transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    color: #ECEFF1; /* カーソルを重ねた時の文字の色 */
    background-color: #5b5b5b; /* カーソルを重ねた時の背景色 */
    border:solid 2px #a4a4a4; /* ボーダー色　ボーダーが要らなければこの行を削除 */
    -webkit-animation: anim-1 0.3s forwards;
    animation: anim-1 0.3s forwards;
}
.entry-content .entry-see-more:hover::before {
    -webkit-animation: anim-2 0.3s 0.3s forwards;
    animation: anim-2 0.3s 0.3s forwards;
}
/* アニメーション部分 */
@-webkit-keyframes anim-1 {
    60% {
        -webkit-transform: scale3d(0.8, 0.8, 1);
        transform: scale3d(0.8, 0.8, 1);
    }
    85% {
        -webkit-transform: scale3d(1.1, 1.1, 1);
        transform: scale3d(1.1, 1.1, 1);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes anim-1 {
    60% {
        -webkit-transform: scale3d(0.8, 0.8, 1);
        transform: scale3d(0.8, 0.8, 1);
    }
    85% {
        -webkit-transform: scale3d(1.1, 1.1, 1);
        transform: scale3d(1.1, 1.1, 1);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@-webkit-keyframes anim-2 {
    to {
        opacity: 0;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes anim-2 {
    to {
        opacity: 0;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}