講座2

ボタンを震えさせるHTMLとCSSを使ってする方法

  • Jo Masafumi
  • Jo Masafumi
学習状況をツイッターでつぶやく

次は、ボタンを震えさせるHTMLとCSSを使ってする方法をします。

ボタンを震えさせるHTMLとCSSを使ってする方法

ワードプレスの管理画面を開きます。

左上の「投稿」を押します。

左上の「新規追加」を押します。

左上の「タイトルを追加」に「ボタンを震えさせるHTMLとCSSを使ってする方法」と入力します。

右側の「テキスト」を押します。

テキストのところにコードを貼り付けます。

テキストのところに下記のコードをコピーして、貼り付けます。

1
<a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="furueru-btn1">クラウドワークス公式</a>

貼り付けました。

右側の「公開」を押します。

「OK」を押します。

右上の「変更をプレビュー」を押します。

「ボタンを震えさせるHTMLとCSSを使ってする方法」の
ボタンが震えることを確認します。

学習状況をツイッターでつぶやく
↑じょうまさふみに学習状況を報告すると喜びます(^^)/

HTMLとCSSの説明

CSS

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
/*震えるボタン（基本）*/
.furueru-btn1 {
  display: inline-block; /*横並び*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  background: #668ad8;/*背景色*/
  color: #FFF !important; /*文字色*/
  animation: furueru-btn1a .1s  infinite; /*震える時間*/
}
@keyframes furueru-btn1a {
  0% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
  25% {transform: translate(2px, 2px) rotateZ(1deg)} /*震える動き調整*/
  50% {transform: translate(0px, 2px) rotateZ(0deg)} /*震える動き調整*/
  75% {transform: translate(2px, 0px) rotateZ(-1deg)} /*震える動き調整*/
  100% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
}

HTML

1
<a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="furueru-btn1">クラウドワークス公式</a>

「display」は、文字の位置を指定するためのCSSコードです。

「padding」は、ボタンの余白を設定するためのCSSコードです。

「text-decoration」のところは文字の装飾するためのCSSコードです。

「background」は、ボタンの背景色を設定するためのCSSコードです。

「color」は、文字の色を設定するためのCSSコードです。

「animation」のところは文字の震える時間を設定するCSSコードです。

「translate」は、文字の震える動きの位置を設定するCSSコードです。

「rotateZ」は、文字の回転の位置を設定するCSSコードです。

「https://crowdworks.jp」を、他のURLリンクに変えると、リンク先を変えることができます。

震えるボタン記入例

震えるボタン（基本）

CSS

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
/*震えるボタン（基本）*/
.furueru-btn1 {
  display: inline-block; /*横並び*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  background: #668ad8;/*背景色*/
  color: #FFF !important; /*文字色*/
  animation: furueru-btn1a .1s  infinite; /*震える時間*/
}
@keyframes furueru-btn1a {
  0% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
  25% {transform: translate(2px, 2px) rotateZ(1deg)} /*震える動き調整*/
  50% {transform: translate(0px, 2px) rotateZ(0deg)} /*震える動き調整*/
  75% {transform: translate(2px, 0px) rotateZ(-1deg)} /*震える動き調整*/
  100% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
}

HTML

1
<a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="furueru-btn1">クラウドワークス公式</a>

記事をプレビュー表示したとき

クラウドワークス公式

震えるボタン（上から見た）

CSS

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/*震えるボタン（上から見た）*/
.furueru-btn2 {
  display: inline-block; /*横並び*/
  position: relative; /*通常の表示位置が基準*/
  padding: 0.35em 1em; /*余白*/
  background: red;/*背景色*/
  color: #FFF !important; /*文字色*/
  text-decoration: none !important; /*装飾なし*/
  transition: all .3s ease 0s; /*変化時間*/
  animation: furueru-btn2a .1s  infinite; /*震える時間*/
}
/*ボタンの上側台形部分*/
.furueru-btn2:before {
  content: ""; /**/
  position: absolute; /*親要素の左上基準*/
  top: -16px; /*上側位置*/
  left: 0; /*左側位置*/
  width: -webkit-calc(100% - 0px); /*横幅*/
  width: calc(100% - 0px); /*横幅*/
  height: 0; /*高さ*/
  border: solid 8px transparent; /*ボタン上側　太さ*/
  border-bottom-color: #ff6b85; /*ボタン上側　色*/
}
@keyframes furueru-btn2a {
  0% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
  25% {transform: translate(2px, 2px) rotateZ(1deg)} /*震える動き調整*/
  50% {transform: translate(0px, 2px) rotateZ(0deg)} /*震える動き調整*/
  75% {transform: translate(2px, 0px) rotateZ(-1deg)} /*震える動き調整*/
  100% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
}

HTML

1
<a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="furueru-btn2">クラウドワークス公式</a>

記事をプレビュー表示したとき

クラウドワークス公式

震えるボタン（丸み）

CSS

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
/*震えるボタン（丸み）*/
.furueru-btn3 {
  position: relative; /*通常の表示位置が基準*/
  display: inline-block; /*横並び*/
  padding: 0.25em 0.5em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  color: #FFF !important; /*文字色*/
  background: #fd9535;/*背景色*/
  border-radius: 4px;/*角の丸み*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05) !important; /*影*/
  font-weight: bold; /*文字太さ*/
  border: solid 2px #d27d00;/*線色*/
  animation: furueru-btn3a .1s  infinite; /*震える時間*/
}
@keyframes furueru-btn3a {
  0% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
  25% {transform: translate(2px, 2px) rotateZ(1deg)} /*震える動き調整*/
  50% {transform: translate(0px, 2px) rotateZ(0deg)} /*震える動き調整*/
  75% {transform: translate(2px, 0px) rotateZ(-1deg)} /*震える動き調整*/
  100% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
}

HTML

1
<a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="furueru-btn3">クラウドワークス公式</a>

記事をプレビュー表示したとき

クラウドワークス公式

震えるボタン（ふせん）

CSS

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
/*震えるボタン（ふせん）*/
.furueru-btn4 {
  display: inline-block; /*横並び*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  background: #f7f7f7; /*背景色*/
  border-left: solid 6px #ff7c5c;/*左線*/
  color: #ff7c5c !important;/*文字色*/
  font-weight: bold; /*文字太さ*/
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*影*/
  animation: furueru-btn4a .1s  infinite; /*震える時間*/
}
@keyframes furueru-btn4a {
  0% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
  25% {transform: translate(2px, 2px) rotateZ(1deg)} /*震える動き調整*/
  50% {transform: translate(0px, 2px) rotateZ(0deg)} /*震える動き調整*/
  75% {transform: translate(2px, 0px) rotateZ(-1deg)} /*震える動き調整*/
  100% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
}

HTML

1
<a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="furueru-btn4">クラウドワークス公式</a>

記事をプレビュー表示したとき

クラウドワークス公式

震えるボタン（電源みたい）

CSS

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/*震えるボタン（電源みたい）*/
.furueru-btn5 {
  display: inline-block; /*横並び*/
  text-decoration: none !important; /*装飾なし*/
  color: blue !important; /*アイコン色*/
  width: 80px; /*横幅*/
  height: 80px; /*縦幅*/
  line-height: 80px; /*行高さ*/
  font-size: 40px; /*アイコンサイズ*/
  border-radius: 50%; /*角丸み*/
  text-align: center; /*中央位置*/
  overflow: hidden; /*非表示*/
  font-weight: bold !important; /*文字太さ*/
  background-image: linear-gradient(#e8e8e8 0%, #d6d6d6 100%); /*グラデーション*/
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66); /*影*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19); /*影*/
  border-bottom: solid 2px #b5b5b5; /*線色*/
  animation: furueru-btn5a .1s  infinite; /*震える時間*/
}
.furueru-btn5 i {
  line-height: 80px; /*行高さ*/
}
@keyframes furueru-btn5a {
  0% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
  25% {transform: translate(2px, 2px) rotateZ(1deg)} /*震える動き調整*/
  50% {transform: translate(0px, 2px) rotateZ(0deg)} /*震える動き調整*/
  75% {transform: translate(2px, 0px) rotateZ(-1deg)} /*震える動き調整*/
  100% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
}

HTML

1
<a href="https://crowdworks.jp" target="_blank" class="furueru-btn5" rel="noopener noreferrer"><i class="fa fa-power-off"></i></a>

記事をプレビュー表示したとき

震えるボタン（色変わる）

CSS

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
/*震えるボタン（色変わる）*/
.furueru-btn6 {
  display: inline-block; /*横並び*/
  padding: 0.3em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  color: #67c5ff !important; /*文字色*/
  border: solid 2px #67c5ff; /*枠線*/
  border-radius: 3px; /*角丸み*/
  animation: furueru-btn6a .1s  infinite; /*震える時間*/
}
.furueru-btn6:hover {
  background: #67c5ff; /*背景色*/
  color: white !important; /*文字色*/
}
@keyframes furueru-btn6a {
  0% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
  25% {transform: translate(2px, 2px) rotateZ(1deg)} /*震える動き調整*/
  50% {transform: translate(0px, 2px) rotateZ(0deg)} /*震える動き調整*/
  75% {transform: translate(2px, 0px) rotateZ(-1deg)} /*震える動き調整*/
  100% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
}

HTML

1
<a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="furueru-btn6">クラウドワークス公式</a>

記事をプレビュー表示したとき

クラウドワークス公式

震えるボタン（両端線）

CSS

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/*震えるボタン（両端線）*/
.furueru-btn7 {
  position: relative; /*通常の表示位置が基準*/
  display: inline-block; /*横並び*/
  font-weight: bold !important; /*文字太さ*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*余白*/
  border-left: solid 4px #668ad8; /*左線*/
  border-right: solid 4px #668ad8; /*右線*/
  color: #668ad8 !important; /*文字色*/
  background: #e1f3ff; /*背景色*/
  animation: furueru-btn7a .1s  infinite; /*震える時間*/
}
.furueru-btn7:hover {
  background: #668ad8 !important; /*背景色*/
  color: #FFF !important; /*文字色*/
}
@keyframes furueru-btn7a {
  0% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
  25% {transform: translate(2px, 2px) rotateZ(1deg)} /*震える動き調整*/
  50% {transform: translate(0px, 2px) rotateZ(0deg)} /*震える動き調整*/
  75% {transform: translate(2px, 0px) rotateZ(-1deg)} /*震える動き調整*/
  100% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
}

HTML

1
<a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="furueru-btn7">クラウドワークス公式</a>

記事をプレビュー表示したとき

クラウドワークス公式

震えるボタン（アイコン付き）

CSS

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/*震えるボタン（アイコン付き）*/
.furueru-btn8 {
  position: relative; /*通常の表示位置が基準*/
  display: inline-block; /*横並び*/
  font-weight: bold !important; /*文字太さ*/
  padding: 0.25em 0.5em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  color: #FFF !important; /*文字色*/
  background: #00bcd4; /*背景色*/
  animation: furueru-btn8a .1s  infinite; /*震える時間*/
}
.furueru-btn8:before {
  font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
  content: "\f013"; /*アイコンの種類*/
  font-weight: bold; /*太字*/
  padding-right: 5px; /*アイコンの右側の余白*/
  color: yellow;/*アイコンの色*/
}
/*ボタンの上にマウスがのったとき*/
.furueru-btn8:hover {
  background: #1ec7bb; /*背景色*/
}
@keyframes furueru-btn8a {
  0% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
  25% {transform: translate(2px, 2px) rotateZ(1deg)} /*震える動き調整*/
  50% {transform: translate(0px, 2px) rotateZ(0deg)} /*震える動き調整*/
  75% {transform: translate(2px, 0px) rotateZ(-1deg)} /*震える動き調整*/
  100% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
}

HTML

1
<a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="furueru-btn8">クラウドワークス公式</a>

記事をプレビュー表示したとき

クラウドワークス公式

震えるボタン（グラデーション）

CSS

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/*震えるボタン（グラデーション）*/
.furueru-btn9 {
  display: inline-block; /*横並び*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  border-radius: 4px; /*角丸み*/
  color: #ffffff !important; /*文字色*/
  background-image: linear-gradient(#6795fd 0%, #67ceff 100%); /*グラデーション*/
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*影*/
  border-bottom: solid 3px #5e7fca; /*下線*/
  animation: furueru-btn9a .1s  infinite; /*震える時間*/
}
/*ボタンの上にマウスをのせたとき*/
.furueru-btn9:hover {
  background-image: linear-gradient(#6795fd 0%, #67ceff 70%); /*グラデーション*/
}
@keyframes furueru-btn9a {
  0% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
  25% {transform: translate(2px, 2px) rotateZ(1deg)} /*震える動き調整*/
  50% {transform: translate(0px, 2px) rotateZ(0deg)} /*震える動き調整*/
  75% {transform: translate(2px, 0px) rotateZ(-1deg)} /*震える動き調整*/
  100% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
}

HTML

1
<a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="furueru-btn9">クラウドワークス公式</a>

記事をプレビュー表示したとき

クラウドワークス公式

震えるボタン（もっと震える）

CSS

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/*震えるボタン（もっと震える）*/
.furueru-btn10 {
  display: inline-block; /*横並び*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  border-radius: 4px; /*角丸み*/
  color: #ffffff !important; /*文字色*/
  background-image: linear-gradient(#88fd67 0%, #1fbf74 100%); /*グラデーション*/
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*影*/
  border-bottom: solid 3px #008c2a; /*下線*/
  animation: furueru-btn10a .2s  infinite; /*震える時間*/
}
/*ボタンの上にマウスをのせたとき*/
.furueru-btn10:hover {
  background-image: linear-gradient(#88fd67 0%, #1fbf74 70%); /*グラデーション*/
}
@keyframes furueru-btn10a {
  0% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
  25% {transform: translate(10px, 10px) rotateZ(1deg)} /*震える動き調整*/
  50% {transform: translate(0px, 10px) rotateZ(0deg)} /*震える動き調整*/
  75% {transform: translate(10px, 0px) rotateZ(-1deg)} /*震える動き調整*/
  100% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
}

HTML

1
<a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="furueru-btn10">クラウドワークス公式</a>

記事をプレビュー表示したとき

クラウドワークス公式

震えるボタン（ゆっくり震える）

CSS

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/*震えるボタン（ゆっくり震える）*/
.furueru-btn11 {
  display: inline-block; /*横並び*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  border-radius: 4px; /*角丸み*/
  color: #ffffff !important; /*文字色*/
  background-image: linear-gradient(#fde667 0%, #ff6e67 100%); /*グラデーション*/
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*影*/
  border-bottom: solid 3px #ff6c00; /*下線*/
  animation: furueru-btn11a .5s  infinite; /*震える時間*/
}
/*ボタンの上にマウスをのせたとき*/
.furueru-btn11:hover {
  background-image: linear-gradient(#fde667 0%, #ff6e67 70%); /*グラデーション*/
}
@keyframes furueru-btn11a {
  0% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
  25% {transform: translate(10px, 10px) rotateZ(1deg)} /*震える動き調整*/
  50% {transform: translate(0px, 10px) rotateZ(0deg)} /*震える動き調整*/
  75% {transform: translate(10px, 0px) rotateZ(-1deg)} /*震える動き調整*/
  100% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
}

HTML

1
<a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="furueru-btn11">クラウドワークス公式</a>

記事をプレビュー表示したとき

クラウドワークス公式

震えるボタン（ボタンの上にマウスをのせると止まる）

CSS

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/*震えるボタン（ボタンの上にマウスをのせると止まる）*/
.furueru-btn12 {
  display: inline-block; /*横並び*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  border-radius: 4px; /*角丸み*/
  color: #ffffff !important; /*文字色*/
  background-image: linear-gradient(#fd6767 0%, #7a67ff 100%); /*グラデーション*/
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*影*/
  border-bottom: solid 3px #0800ff; /*下線*/
  animation: furueru-btn12a .5s  infinite; /*震える時間*/
}
/*ボタンの上にマウスをのせたとき*/
.furueru-btn12:hover {
  background-image: linear-gradient(#fd6767 0%, #7a67ff 70%); /*グラデーション*/
  animation: furueru-btn12a 0s  infinite; /*震える時間*/
}
@keyframes furueru-btn12a {
  0% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
  25% {transform: translate(10px, 10px) rotateZ(1deg)} /*震える動き調整*/
  50% {transform: translate(0px, 10px) rotateZ(0deg)} /*震える動き調整*/
  75% {transform: translate(10px, 0px) rotateZ(-1deg)} /*震える動き調整*/
  100% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
}

HTML

1
<a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="furueru-btn12">クラウドワークス公式</a>

記事をプレビュー表示したとき

クラウドワークス公式