CSS

CSS ぷるぷる動くボタンの作成方法

CSSプルプル動く動的なボタン

こんばんは!本日はボタンが動くCSSを作成してみました。動的に動いているボタンだと心理的に押したくなるかもしれません。

それではさっそくですが、ボタンをブルブル動かしてみましょう!

CSS ぷるぷる動くボタンの作成方法

ボタンを動的に動かすには、次の準備が必要となります。

  1. 型となるボタンのデザインをCSSで作成
  2. ボタンの動的に動かすための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があれば記述します。

それではー!

ABOUT ME
なお
フルスタックエンジニアを目指すサラリーマン。インフラ、WEBを中心に色んなIT関連情報に手を出したいと思います。

にほんブログ村 IT技術ブログ IT技術メモへ

SEからの脱出日記 - にほんブログ村

%d人のブロガーが「いいね」をつけました。