昔はLP（ランディングページ）を作るときはデザイナーにフォトショップでデザインしてもらって、それを切り分けてHTMLで貼っていっていました。その時、リンク付きのボタンをGifで光らせたりFLASHで動かしたりなんてしていましたが、今はHTML5・CSS3でできちゃうんですってね。
ということで本記事で実践してみます。
必要なコード
html
<div id="app"> <a class="light-btn" href="#">光るボタン</a> </div>
css
@keyframes light {
0% {
transform: scale(0) rotate(25deg);
opacity: 0;
}
50% {
transform: scale(1) rotate(25deg);
opacity: 1;
}
100% {
transform: scale(50) rotate(25deg);
opacity: 0;
}
}
#app {
width: 300px;
margin: 50px auto;
padding: 31px;
line-height: 1.4;
border: 1px solid #ffffff;
border-radius: 2px;
background-color: transparent;
box-shadow: 2px 2px 5px 0px rgba(200,200,200,1);
}
.light-btn {
position: relative;
width: 100%;
height: 40px;
display: block;
line-height: 40px;
text-align: center;
text-decoration: none;
color: #fff;
background-color: #ffc73c;
cursor: pointer;
overflow: hidden;
}
.light-btn::after {
content: '';
position: absolute;
top: -100px;
left: -100px;
width: 60px;
height: 60px;
background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 0) 0%);
animation-name: light;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
出力してみる
Code penで出力してみます。
See the Pen
Shiny Button2 | CSS by アドニー研究所 (@adoneelab)
on CodePen.
光らせることができました。
ちょっとしたことですが、動きが加わることによってかなり目を引くようになりました。
LPで商品の購入ページのリンクを貼る際にはかなり有効かと思います。
ただあまり多様すると目がちかちかしたり、下品なサイトだと思われてしまい、ページの離脱率が上がってしまう可能性があります。
使用するときはここぞという時にしましょう。
コメント