update: Last updated: 1024view
CSSだけでいろんな動きのアニメーションボタン
cssでボタンを作成
どこでも良く見かける普通のボタンを作成します。
html
<p><a href="#" class="click_btn"></a></p>
クラス名を「click_btn」にしました。cssのコードはこちらです。
.click_btn{
background: #2da1e9;
border-radius: 5px;
color: #fff;
font-size: 18px;
font-weight: bold;
padding: 8px 0;
margin: 0 auto;
text-align: center;
width: 50%;
}
これをベースにいろんな動きのあるボタンを作成してみました。
ボタンその1 ぼよ~んぼよ~ん
html
<p><a href="#" class="click_btn anime01"></a></p>
anime01というクラス名を付与。anime01のcssコード
.anime01{
animation: pouding1 .5s linear infinite alternate;
}
@keyframes pouding1{
0%{ transform: scale(1.5); }
100%{ transform: scale(1); }
}
ボタンその2 跳ねてる感じ
html
<p><a href="#" class="click_btn anime02"></a></p>
anime02というクラス名を付与。anime02のcssコード
.anime02{
animation: pouding2 0.3s alternate infinite;
}
@keyframes pouding2{
0% {transform: translateY(0px);}
100% {transform: translateY(-12px);}
}
ボタンその3 キラッと光る
anime03というクラス名を付与。anime03のcssコード
.anime03{
overflow: hidden;
position: relative;
}
.anime03::before{
content: '';
background-color: #fff;
animation: kira 3s ease-in-out infinite;
position: absolute;
top: -180px;
left: 0;
opacity: 0;
transform: rotate(45deg);
width: 25px;
height: 100%;
}
@keyframes kira{
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;
}
}