![見出し画像](https://assets.st-note.com/production/uploads/images/123063577/rectangle_large_type_2_0f4fc219cda23a4c4a0507c05912b919.png?width=1200)
2023年12月 STUDIOでキランと光るボタンの作り方
LPなどで見る、光るボタン!
やっぱり目に留まりやすいので、
少しでも”お問い合わせ”や”購入”につながりやすいですよね。
▶︎完成ボタン参考:https://min-pro.com (トップページ)
![](https://assets.st-note.com/img/1701261698936-dWHvCm7WQi.png?width=1200)
なので、クライアントからの光るボタンの要望も少なくないと思います。
HTMLやCSSが面倒だからSTUDIOで作りたーい!
ノーコード最高!
ということで
STUDIOで使えるコードがこちら!
(コードをコピペするだけでOKです)
(スクショ付きで操作方法も解説してます)
(<iframe>タグのID設定などによって動作しない可能性はあります)
⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.c-button._shiny {
display: block;
position: relative;
padding: 0.8em 1.2em; /* 少し小さく調整 */
font-weight: Bold;
font-size: 20px; /* 少し小さく調整 */
color: black;
text-align: center;
text-decoration: none;
overflow: hidden;
margin: -5px auto 20px;
max-width: 500px;
}
.c-button._shiny::before {
content: '';
position: absolute;
top: -50px;
left: 0;
width: 50px;
height: 100%;
background-color: #b5e7ff ;
transition: 300ms;
animation: shinyshiny 2.5s ease-in-out infinite;
}
.c-button._shiny:hover {
text-decoration: none;
color: #fff ;
box-shadow: none;
transform: translateY(3px);
}
@keyframes shinyshiny {
0% { transform: scale(0) rotate(45deg); opacity: 0; }
80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { transform: scale(4) rotate(45deg); opacity: 1; }
100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
</style>
</head>
<body>
<a href="#" class="c-button _shiny">お問い合わせはこちら</a>
</body>
</html>
⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️⚫️
やり方を解説します。(STUDIOのある程度の知識がある前提)
①Boxを挿入します
![](https://assets.st-note.com/img/1701263036776-yfTxZfWrCO.png?width=1200)
②EmbedのBlankを挿入します(iframeのやつ)
![](https://assets.st-note.com/img/1701263075317-OMLT6vGBkE.png?width=1200)
③Boxの中にiframe(EmbedのBlank)を入れます
![](https://assets.st-note.com/img/1701263189817-vPfycF4y6L.png?width=1200)
![](https://assets.st-note.com/img/1701263195185-IOORB4Tjok.png?width=1200)
![](https://assets.st-note.com/img/1701263202062-buNE5GTCed.png?width=1200)
④Boxに任意のリンクを入れておきます
![](https://assets.st-note.com/img/1701263244775-xq20ZofnU5.png?width=1200)
⑤iframe(EmbedのBlank)のコードをさっきの⚫️⚫️〜⚫️⚫️のコードを挿入します
途中で画像になってしまってますけど全文貼り付けてください
![](https://assets.st-note.com/img/1701263282922-DzW8NHxREL.png?width=1200)
![](https://assets.st-note.com/img/1701263403284-EWu2mjBlp7.png?width=1200)
⑥Boxの背景を透明に
![](https://assets.st-note.com/img/1701263429689-c8HKnMi7jn.png?width=1200)
⑦あとはiframeの大きさを整えます
光る範囲は決まってるので絶妙な調整が必要です
![](https://assets.st-note.com/img/1701263455610-qAjLp92r5a.png?width=1200)
もちろん、文字の色、太さ、大きさや光り方などはコードをいじれば変えられます。。。
![](https://assets.st-note.com/img/1701263570378-omNOfjthSp.png?width=1200)
光るボタンの完成です!
みんなのプロモーション 角 裕介
min-pro.com
この記事が気に入ったらサポートをしてみませんか?