CTAなどに最適！ボタンの周りを光の輪が回るボタンデザイン

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

gigazineさんの記事に影響を受け、「ボタンの周りを光が回転するCSS」を作成してみました。

参考：CSSの「@property」を活用しておしゃれなボタンを作る方法をエキスパートが解説

そして、作成したボタンが下記です。

今すぐ商品を購入

なお、動作確認をしたところ、Chrome、Egde、Opera、Safariでは問題ありませんでしたが、Firefoxは少しだけ動きがぎこちなかったです。

ボタンの周りを光が回転するCSS

今回は、gigazineさんの記事にあった@propertyを使って作成しました。

@propertyは初めて使いましたが、変数として利用できるので、一度作成してしまえば修正が“楽”になりそうでした。

まぁ、細かい説明は置いといて、コードを記載します。

HTML

<div class="nya-button-container">
<a href="#" class="nya-shiny-cta">今すぐ商品を購入</a>
</div>

ボタンを設置したい箇所に、このHTMLを記述します。

CSS

 :root {
--shiny-cta-bg: #ff4b4b; /* ボタン背景 */
--shiny-cta-fg: #ffffff; /* 文字色 */
--shiny-cta-hover-bg: #ffffff; /* ホバー時の背景色 */
--shiny-cta-hover-fg: #ff4b4b; /* ホバー時の文字色 */
--shiny-cta-highlight: #FF0B0B; /* ボタンの周りの光 */
}

@property --gradient-angle {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}

@property --scale-size {
syntax: "<number>";
initial-value: 1;
inherits: false;
}

.nya-button-container {
display: flex;
justify-content: center;
align-items: center;
}

.nya-shiny-cta {
--animation-duration: 3s;
--animation: gradient-rotate var(--animation-duration) linear infinite,
scale-up var(--animation-duration) ease-in-out infinite;
position: relative;
padding: 1.25rem 2.5rem;
font-family: 'Inter', sans-serif;
font-size: 1.125rem;
line-height: 1.2;
border: 3px solid transparent;
border-radius: 360px;
color: var(--shiny-cta-fg);
background: linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg))
padding-box,
conic-gradient(
from var(--gradient-angle),
transparent,
var(--shiny-cta-highlight) 10%,
transparent 30%
)
border-box;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
cursor: pointer;
transform: scale(var(--scale-size));
transition: background-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
animation: var(--animation);
text-decoration: none;
display: inline-block; 
text-align: center;
}

/* ホバー時のスタイル: 背景と文字色を反転、光の効果を保持 */
.nya-shiny-cta:hover {
background: linear-gradient(var(--shiny-cta-hover-bg), var(--shiny-cta-hover-bg)) padding-box,
conic-gradient(
from var(--gradient-angle),
transparent,
var(--shiny-cta-highlight) 10%,
transparent 30%
) border-box;
color: var(--shiny-cta-hover-fg);
box-shadow: inset 0 0 0 2px var(--shiny-cta-hover-fg); /* ホバー時のボーダー */
}

/* アニメーション: グラデーションの角度を360度回転 */
@keyframes gradient-rotate {
0% {
--gradient-angle: 0deg;
}
100% {
--gradient-angle: 360deg;
}
}

/* アニメーション: ボタンが少し大きくなって元の大きさに戻る */
@keyframes scale-up {
0%, 100% {
--scale-size: 1;
}
50% {
--scale-size: 1.1;
}
}

色などを変更したい場合は、:rootの箇所を修正する事で変更する事ができます。

:root {
--shiny-cta-bg: #ff4b4b; /* ボタン背景 */
--shiny-cta-fg: #ffffff; /* 文字色 */
--shiny-cta-hover-bg: #ffffff; /* ホバー時の背景色 */
--shiny-cta-hover-fg: #ff4b4b; /* ホバー時の文字色 */
--shiny-cta-highlight: #FF0B0B; /* ボタンの周りの光 */
}

ボタンの周りの光が通る道は、.nya-shiny-ctaのborder: 3px solid transparent;で設定しています。

このborderを、4、5pxとすれば、ボタンの周りの光が太くなり、2、1pxとすれば細くなります。

投稿ページ内に設置するCTAのボタンのつもりで作成しましたが、サイドバー（サイドメニュー）などに設置してもいいかもしれません。

もしよかったらご活用ください。

今すぐ商品を購入