【HTML】光るボタンの実装【CSS】

  • 投稿日
  • 更新日
  • 著者 くまだ
  • カテゴリー Web制作

どうも、くまだです。

LPコーディング案件でよく見かける光るボタンの実装方法について。

光るボタンの実装方法

コードと動きは下記になります。

  <div class="l-container">
    <div class="c-button__wrap">
      <a href="#" class="c-button">光るボタン</a>
    </div>
  </div>
.c-button {
    display: block;
    position: relative;
    padding:10px;
    overflow: hidden;
    border-radius: 10px;
    background: rgb(255, 129, 152);
    background: -webkit-gradient(linear, left top, left bottom, from(rgb(255, 129, 152)), to(rgb(246, 30, 70)));
    background: -webkit-linear-gradient(top, rgb(255, 129, 152) 0%, rgb(246, 30, 70) 100%);
    background: linear-gradient(180deg, rgb(255, 129, 152) 0%, rgb(246, 30, 70) 100%);
    text-align: center;
    transition: all 0.4s;
    text-decoration: none;
    color: #fff;
}

.c-button::before {
    position: absolute;
    top: 0;
    left: -75%;
    width: 30%;
    height: 100%;
    transform: skewX(-25deg);
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, .8)));
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .8) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .8) 100%);
    animation: shine 1s infinite;
    content: "";
}


@-webkit-keyframes shine {
  100% {
    left: 125%;
  }
}

@keyframes shine {
  100% {
    left: 125%;
  }
}


/* 調整用 */
.l-container {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 100vh;
}

.c-button__wrap {
  width: 100%;
  max-width: 280px;

}

ボタンとグラデーション部分の解説は省略します。（今回の主題ではないので）

シュッと光る部分は疑似要素で作成しています。

光る部分をわかりやすくするために、下記にように書き換えます。

.c-button {
    display: block;
    position: relative;
    padding:10px;

    /* いったんコメントアウト */
    /* overflow: hidden; */

    border-radius: 10px;
    background: rgb(255, 129, 152);
    background: -webkit-gradient(linear, left top, left bottom, from(rgb(255, 129, 152)), to(rgb(246, 30, 70)));
    background: -webkit-linear-gradient(top, rgb(255, 129, 152) 0%, rgb(246, 30, 70) 100%);
    background: linear-gradient(180deg, rgb(255, 129, 152) 0%, rgb(246, 30, 70) 100%);
    text-align: center;
    transition: all 0.4s;
    text-decoration: none;
    color: #fff;
}


.c-button::before {
    position: absolute;
    top: 0;
    left: -75%;
    width: 30%;
    height: 100%;
    content: "";
    background: black;
}
光るボタンの実装

左側に表示されているのが、色を変えた光るやつだと思ってください。

CSSでanimationプロパティを使って左から右に黒の要素を動かします。animationプロパティはkeyframesを使ってアニメーションが実装できるので、下記のようにkeyframesを設定。

@-webkit-keyframes shine {
  100% {
    left: 125%;
  }
}

@keyframes shine {
  100% {
    left: 125%;
  }
}

設定したkeyframesは、下記のように使用します。

.c-button::before {
    position: absolute;
    top: 0;
    left: -75%;
    width: 30%;
    height: 100%;
    animation: shine 1s infinite; /* keyframesで設定したアニメーション */
    content: "";

    background: black;
}

こんな感じで左から右に要素が動かせます。これをちょっと斜めに調整。

.c-button::before {
    position: absolute;
    top: 0;
    left: -75%;
    width: 30%;
    height: 100%;
    transform: skewX(-25deg);　/* 追記 斜めにする */
    animation: shine 1s infinite;
    content: "";

    background: black;
}

だんだんそれっぽくなってきます。c-buttonでコメントアウトしていたoverflow: hidden;を復活させます。

.c-button {
    display: block;
    position: relative;
    padding:10px;
    overflow: hidden;
    border-radius: 10px;
    background: rgb(255, 129, 152);
    background: -webkit-gradient(linear, left top, left bottom, from(rgb(255, 129, 152)), to(rgb(246, 30, 70)));
    background: -webkit-linear-gradient(top, rgb(255, 129, 152) 0%, rgb(246, 30, 70) 100%);
    background: linear-gradient(180deg, rgb(255, 129, 152) 0%, rgb(246, 30, 70) 100%);
    text-align: center;
    transition: all 0.4s;
    text-decoration: none;
    color: #fff;
}

c-button要素の外側がoverflow: hidden;によって非表示になります。

あとは疑似要素の黒い部分を白っぽい透過した感じの色に置き換えます。

.c-button::before {
    position: absolute;
    top: 0;
    left: -75%;
    width: 30%;
    height: 100%;
    transform: skewX(-25deg);
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, .8)));
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .8) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .8) 100%);
    animation: shine 1s infinite;
    content: "";
}

これで完成です。

ここまで読んでくださりありがとうございました。

CSS HTML

この記事を書いた人

くまだ

記事一覧