KEPRATE(ケプレイト)|大阪府枚方市・交野市・寝屋川市を中心に活動しているフリーランスWeb制作事務所 WordPress・レスポンシブ対応ならおまかせ!

CSSのafter(擬似クラス)に背景色を入れ透過させずにアニメーション

2018/02/21
Category :
  1. CSS
Tags :

CSSのの疑似要素のbeforeとafterを使いサイトの印象を少しリッチにする方法。其の1。

ボタンに背景色を引く

ボタンに背景色を持たせることにより背景画像の上に存在するボタンの場合はロールオーバー時(透過処理)に背景画像がうっすら見える事がなくなり少しかっこよくなります。
スライダー的な要素の上に配置されるnext/prevボタンにロールオーバーした時にも使えるテクニックかと思います。

  

背景色を入れていない場合

通常時
ロールオーバー時

背景がスケスケで It’s really too bad.

背景色を入れている場合

通常時
ロールオーバー時

背景がスケスケではないので It’s very nice.

<div class="link-btn link-btn-square"><a href="#"><span>四角ボタン</span></a></div>
<div class="link-btn link-btn-circle"><a href="#"><span>円ボタン</span></a></div>

HTMLは超絶悶絶シンプル。
ポイントはa要素の上のdivのafter要素に背景色を持たせる事です。

  1. 少しspanなどがあり入れ子気味ですが高さを固定して中央にテキストを配置したかったからで適宜変更してください。
.link-btn {
    position: relative;
}

.link-btn::after {
    position: absolute;
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    background: #fff; /* お好みの背景色に */
    top: 0;
    left: 0;
    z-index: 1; /* 最背面に */
}

.link-btn.no-bg::after {
    display: none; /* 背景色がいらない場合に */
}

.link-btn a {
    position: relative;
    z-index: 2; /* 最前面に */
    display: table;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease;
}

.link-btn a:hover {
    opacity: 0.8;
}

.link-btn a span {
    display: table-cell;
    vertical-align: middle;
    background: #111; /* お好みの背景色に */
    color: #fff; /* お好みの色に */
    text-align: center;
    font-size: 14px;
    font-size: 1.4rem;
}

.link-btn.link-btn-square {
    width: 200px;
    height: 40px;
}

.link-btn.link-btn-circle {
    width: 120px;
    height: 120px;
}

.link-btn.link-btn-circle::after {
    /* ギザり対策に1px小さくして1px移動 */
    width: 118px;
    height: 118px;
    top: 1px;
    left: 1px;
    border-radius: 50%;
    overflow: hidden;
}

.link-btn.link-btn-circle a {
    border-radius: 50%;
    overflow: hidden;
}
  1. ベンダープレフィックスは任意で入れて下さい。

after要素に背景色を持たせる理由ですが

  • アニメーションに対応できる
  • フォームの送信ボタンに二重送信禁止を簡単に実装(次回投稿予定)

など色々な事に対応できます。
この仕様で作成していて後々困る事はないです。

下記はなぜか円の時に背景色が1px?ギザる画像

  1. ギザり確認用に背景色は#cc0000にしております。

意外となぜかこの処理を入れていないサイトが多いですがとても簡単なのでボタン作成時は検討してみてください。

隣の席のロールオーバー時に背景が透ける事で悩んでいる可愛いWeb女子に教えて 君もモテモテだ!

  1. ソースの流用、改変は自由ですが自己責任とさせていただきます。
トラックバック URL
https://keprate.com/web/css/css-after-bg/trackback/
奇跡的に興味を持たれた方は
是非お問い合わせください。
  • 電話番号の掛け間違いにお気をつけください。
  • 女性は業務に一切関係ございません。
PAGE TOP