視線を集める!光が舞うアニメーションボタンのCSS

※当サイトにはプロモーションが含まれています。

クライアントクライアント

ボタンがあることがわかるように動きのあるボタンを作ってくれ!

にゃテックにゃテック

おけまるだにゃ

サイト内に色々な画像や文字があると、ボタンが埋もれてしまうことがあるかと思います。

また、サイト内に複数のボタンがあったりすると、大事なボタンが埋もれてしまうかもしれません。

その為、どうしても目立たせたいボタンがある場合などに、視線を集めることができるボタンを作成してみました。

光が舞うアニメーションボタンのCSS

蛍のような光を放つ、アニメーションボタンのHTMLとCSSです。

HTML

<div class="nya-center-wrap nya-glow-button-wrap">
<a class="nya-glow-button" href="#" rel="noopener">シークレットサイトを見てみる</a>
</div>

ボタンを表示させたい箇所に、このHTMLを記載します。

CSS

.nya-center-wrap {
text-align: center;
margin: 30px 0;
}

.nya-glow-button-wrap .nya-glow-button {
position: relative;
z-index: 10;
display: inline-block;
min-width: 250px;
transition: .2s;
border-radius: 32px;
padding: 12px 50px;
background-color: #17ad2f;
color: #fff;
font-weight: 700;
font-size: 16px;
text-decoration: none;
background-position: calc(100% - 24px) center;
background-size: auto 12px;
}

.nya-glow-button:before, .nya-glow-button:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 32px;
z-index: -1;
}

/* 最初の光のアニメーション */
.nya-glow-button:before {
background: rgba(23, 173, 47, 0.6);
animation: nya-glow-animation1 3.0s infinite;
}

/* 二番目の光のアニメーション */
.nya-glow-button:after {
background: rgba(23, 173, 47, 0.6);
animation: nya-glow-animation2 3.0s infinite;
animation-delay: 1.5s;
}

@keyframes nya-glow-animation1 {
0% {
box-shadow: 0 0 0px 0 rgba(23, 173, 47, 0.6);
}
80% {
box-shadow: 0 0 0px 15px rgba(23, 173, 47, 0.1);
}
100% {
box-shadow: 0 0 10px 15px rgba(23, 173, 47, 0);
}
}

@keyframes nya-glow-animation2 {
0% {
box-shadow: 0 0 0px 0 rgba(23, 173, 47, 0.6);
}
80% {
box-shadow: 0 0 0px 15px rgba(23, 173, 47, 0.1);
}
100% {
box-shadow: 0 0 10px 15px rgba(23, 173, 47, 0);
}
}

@keyframesを使用して、2つのアニメーションを動かしています。

それが、ループすることによって、絶えず光を放っているように見せています。

@keyframesに記載されている値を変更することで、アニメーション効果を変更することができます。