こんばんは！本日はボタンが動くCSSを作成してみました。動的に動いているボタンだと心理的に押したくなるかもしれません。はじめてCSSを作成する場合は、過去記事も見てみてください↓
それではさっそくですが、ボタンをブルブル動かしてみましょう!
CSS ぷるぷる動くボタンの作成方法
ボタンを動的に動かすには、次の準備が必要となります。
- 型となるボタンのデザインをCSSで作成
- ボタンの動的に動かすためのCSSを作成
まずは、CSSの型となるコードを記述しましょう。
CSS ボタン作成のデザインコード
ボタンの作成（大きいサイズ）
.button-simple {
position: relative;
font-weight: bold;
padding: 15px 25px;
margin: 0px 5px;
border-radius: 30px; /角の丸み/
font-size: 30px; /文字サイズ/
background-color: #fb1212; /背景色/
color: #fff; /文字色/
display: inline-block;
text-shadow: 1px 1px 0px rgb(0, 0, 0, 0.3);
box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3);
}
.button-simple:before {
font-family: tahoma;
content: ‘\f144’; /好きなアイコン/
color: #ee2222;/アイコンの色/
margin-right: 3px;
}
a:hover .button-simple {
background-color: #0000㏄; /触れたときの背景色/
color: #fff; /触れたときの文字色/
box-shadow: 0 0px 0 rgb(0, 0, 0, 0.3);
animation-play-state: paused;
top: 3px;
}
ボタンの作成（小さいサイズ）
.button-small {
position: relative;
font-weight: bold;
padding: 5px 15px;
margin: 5px 5px;
border-radius: 5px; /角の丸み/
font-size: 16px; /文字サイズ/
background-color: #fb1212; /背景色/
color: #fff; /文字色/
display: inline-block;
text-shadow: 2px 2px 1px rgb(0, 0, 0, 0.3);
box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3);
}
.button-simple:before {
font-family: FontAwesome;
content: ‘\f144’; /好きなアイコン/
color: #ee2222; /アイコンの色/
margin-right: 3px;
}
a:hover .button-simple {
background-color: #0000㏄; /触れたときの背景色/
color: #fff; /触れたときの文字色/
box-shadow: 0 0px 0 rgb(0, 0, 0, 0.3);
animation-play-state: paused;
top: 3px;
}
CSS 動的なボタンの作成
CSS ドンドンと動くボタン
.dondon {
animation: dondon 1s infinite;
}
@keyframes dondon {
0% {
transform: scale(1.1)
}
5% {
transform: scale(1.1)
}
90% {
transform: scale(1)
}
100% {
-webkit-transform: scale(1.15)
}
}
CSS プルプル動くボタン
.purupuru {
animation: purupuru 2s infinite;
}
@keyframes purupuru {
0% {
transform: translate(0px, 4px);
}
5% {
transform: translate(0px, -3px);
}
10% {
transform: translate(0px, 3px);
}
15% {
transform: translate(0px, -3px);
}
20% {
transform: translate(0px, 3px);
}
25% {
transform: translate(0px, -3px);
}
30% {
transform: translate(0px, 0px);
}
}
このコードをCSSへコピーするだけで、動的なボタンを作成することが出来ます。ボタンを強調させてボタン押下を促すことが出来ます。また便利なCSSがあれば記述します。それではー！
良ければ過去記事も見てみてください↓
