※当サイトにはプロモーションが含まれています。
マウスカーソルがボタンの上に重なると、ボタンが押されたように凹むボタン。
キラッと光るボタン。
これらのボタンは、CTA（Call To Action）などでよく見かけたりしますね。
先日、サイト作成の際に実装したので、その備忘録として残しておきます。
思わずクリックしたくなる!? 押せるボタンのCSS
マウスカーソルがボタンの上に重なると、ボタンが押されたように凹むボタンのCSSです。
<div class="nya-btn-container"><a href="#" rel="nofollow">ボタンが押されたように凹むボタン</a></div>.nya-btn-container a {
display: inline-block;
padding: 10px 20px;
background-color: #e69400;
color: white;
font-weight: bold;
text-align: center;
text-decoration: none;
border: 2px solid transparent;
border-radius: 5px;
box-shadow: 0 5px 0 rgba(179, 115, 0, 1);
opacity: 1;
transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}
.nya-btn-container a:hover {
box-shadow: 0 2px 0 rgba(179, 115, 0, 1);
transform: translateY(3px);
opacity: 0.9;
}このコードの簡単な補足説明です。
box-shadowを使って、影は下方向に5ピクセル分、色はrgba(179, 115, 0, 1)にしています。
この効果が、ボタンに立体感を与え、押す前の状態を表現しています。
マウスオーバー時に、box-shadowの数値（オフセット）を変更することで、ボタンが押されたように見えます。
つまり、影のオフセットを5ピクセルから2ピクセルに変更することで、ボタンが凹んだように見せる効果を作り出しています。
transformプロパティのtranslateY(3px)は、要素を垂直方向に3ピクセル移動させています。
これにより、ボタンが押された時に、実際に下に移動するように見せかけます。
思わずクリックしたくなる!? キラッと光るボタンのCSS
キラッと光が走るボタンです。
<a href="#" class="nyainy-btn" target="_blank" rel="noopener">キラッと光が走るボタン！</a>.nyainy-btn {
display: inline-block;
position: relative;
padding: 10px 20px;
margin: 10px auto;
background-color: #e99710;
box-shadow: 1px 1px 5px gray;
border-radius: 5px;
font-weight: bold;
font-size: 18px;
color: #fff !important;
text-align: center;
text-decoration: none;
overflow: hidden;
}
.nyainy-btn::before {
position: absolute;
content: '';
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 45%, rgba(255, 255, 255, 0) 100%);
transform: skewX(-45deg);
animation: nyainy-btn 2.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite;
}
@keyframes nyainy-btn {
0% {
left: -100%;
}
25% {
left: 100%;
}
100% {
left: 100%;
}
}このコードの簡単な補足説明です。
transform: skewX(-45deg);は、擬似要素をX軸方向に45度傾けます。
これにより、光のエフェクトが斜めに見えるようになります。
animationは、擬似要素にアニメーションを適用します。
2.5sはアニメーションの持続時間を示していて、この値を大きくすると、光が走る間隔が長くなります。
@keyframesは、アニメーションを定義しています。
ここでは、光のエフェクトがleftプロパティを使用して、左から右に移動するように設定しています。
なお、コードが記載されているエディターの右上をクリックすれば、コードがコピーできますので、もしよかったらご活用ください。
