様々なデザインのボタンを実装。
はじめに
概要
ウェブ制作で使えるおしゃれなボタンの実装方法をまとめました。サンプルコードも配布していますので、ぜひ活用してください。※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。
クラスの説明
shinyアニメーションの実装
keyframes.shiny {
position: relative;
overflow: hidden;
&:hover {
&::after {
content: '';
position: absolute;
top: -100px;
left: -100px;
width: 50px;
height: 50px;
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: shiny;
animation-delay: -.8s;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
}
}
@keyframes shiny {
0% {
transform: scale(0) rotate(25deg);
opacity: 0;
}
30% {
transform: scale(0) rotate(25deg);
opacity: 0;
}
50% {
transform: scale(1) rotate(25deg);
opacity: 1;
}
100% {
transform: scale(50) rotate(25deg);
opacity: 0;
}
}
.shiny {
position: relative;
overflow: hidden;
&:hover {
&::after {
content: '';
position: absolute;
top: -100px;
left: -100px;
width: 50px;
height: 50px;
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: shiny;
animation-delay: -.8s;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
}
}
@keyframes shiny {
0% {
transform: scale(0) rotate(25deg);
opacity: 0;
}
30% {
transform: scale(0) rotate(25deg);
opacity: 0;
}
50% {
transform: scale(1) rotate(25deg);
opacity: 1;
}
100% {
transform: scale(50) rotate(25deg);
opacity: 0;
}
}
.shiny {
position: relative;
overflow: hidden;
&:hover {
&::after {
content: '';
position: absolute;
top: -100px;
left: -100px;
width: 50px;
height: 50px;
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: shiny;
animation-delay: -.8s;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
}
}
@keyframes shiny {
0% {
transform: scale(0) rotate(25deg);
opacity: 0;
}
30% {
transform: scale(0) rotate(25deg);
opacity: 0;
}
50% {
transform: scale(1) rotate(25deg);
opacity: 1;
}
100% {
transform: scale(50) rotate(25deg);
opacity: 0;
}
}
ポイント
・クラスにshinyを付与するだけで、ホバー時にアニメーションが実装されます。
・anmation-delay: -.8s;としています。これにより、ホバー時の初動を制御することができます。
サンプルコード
こちらからソースコードがダウンロードできます。
まとめ
- ボタンクラスを付与するだけで、アニメーションが実装される
- shinyクラスを付与するだけで、ホバーアニメーションが実装される
- サンプルコードを活用ください
