次は、ボタンをポヨンポヨンさせるHTMLとCSSを使ってする方法をします。
ボタンをポヨンポヨンさせるHTMLとCSSを使ってする方法
ワードプレスの管理画面を開きます。
左上の「投稿」を押します。
左上の「新規追加」を押します。
左上の「タイトルを追加」に「ボタンをポヨンポヨンさせるHTMLとCSSを使ってする方法」と入力します。
右側の「テキスト」を押します。
テキストのところにコードを貼り付けます。
テキストのところに下記のコードをコピーして、貼り付けます。
<a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="poyon-btn1">クラウドワークス公式</a>
貼り付けました。
右側の「公開」を押します。
「OK」を押します。
右上の「変更をプレビュー」を押します。
「ボタンをポヨンポヨンさせるHTMLとCSSを使ってする方法」の
ボタンがポヨンポヨンすることを確認します。
↑じょうまさふみに学習状況を報告すると喜びます(^^)/
HTMLとCSSの説明
CSS
/*ポヨンポヨンのボタン（基本）*/
.poyon-btn1 {
display: inline-block; /*横並び*/
padding: 0.5em 1em; /*余白*/
text-decoration: none !important; /*装飾なし*/
background: #668ad8;/*背景色*/
color: #FFF !important; /*文字色*/
animation: poyon-btn1a 2s ease-in-out infinite; /*ポヨンポヨンする時間*/
}
@keyframes poyon-btn1a {
0% { transform: scale(1.0, 1.0) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
15% { transform: scale(0.9, 0.9) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
30% { transform: scale(1.3, 0.8) translate(0%, 10%); } /*ポヨンポヨン動き調整*/
50% { transform: scale(0.8, 1.3) translate(0%, -10%); } /*ポヨンポヨン動き調整*/
70% { transform: scale(1.1, 0.9) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
100% { transform: scale(1.0, 1.0) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
}
HTML
<a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="poyon-btn1">クラウドワークス公式</a>
「display」は、文字の位置を指定するためのCSSコードです。
「padding」は、ボタンの余白を設定するためのCSSコードです。
「text-decoration」のところは文字の装飾するためのCSSコードです。
「background」は、ボタンの背景色を設定するためのCSSコードです。
「color」は、文字の色を設定するためのCSSコードです。
「animation」のところは文字のポヨンポヨン時間を設定するCSSコードです。
「scale」は、文字のポヨンポヨンの大きさを設定するCSSコードです。
「translate」は、文字のポヨンポヨン動きの位置を設定するCSSコードです。
「https://crowdworks.jp」を、他のURLリンクに変えると、リンク先を変えることができます。
ポヨンポヨンのボタン記入例
ポヨンポヨンのボタン（基本）
CSS
/*ポヨンポヨンのボタン（基本）*/
.poyon-btn1 {
display: inline-block; /*横並び*/
padding: 0.5em 1em; /*余白*/
text-decoration: none !important; /*装飾なし*/
background: #668ad8;/*背景色*/
color: #FFF !important; /*文字色*/
animation: poyon-btn1a 2s ease-in-out infinite; /*ポヨンポヨンする時間*/
}
@keyframes poyon-btn1a {
0% { transform: scale(1.0, 1.0) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
15% { transform: scale(0.9, 0.9) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
30% { transform: scale(1.3, 0.8) translate(0%, 10%); } /*ポヨンポヨン動き調整*/
50% { transform: scale(0.8, 1.3) translate(0%, -10%); } /*ポヨンポヨン動き調整*/
70% { transform: scale(1.1, 0.9) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
100% { transform: scale(1.0, 1.0) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
}
HTML
<a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="poyon-btn1">クラウドワークス公式</a>
記事をプレビュー表示したとき
ポヨンポヨンのボタン（上から見た）
CSS
/*ポヨンポヨンのボタン（上から見た）*/
.poyon-btn2 {
display: inline-block; /*横並び*/
position: relative; /*通常の表示位置が基準*/
padding: 0.35em 1em; /*余白*/
background: red;/*背景色*/
color: #FFF !important; /*文字色*/
text-decoration: none !important; /*装飾なし*/
animation: poyon-btn2a 2s ease-in-out infinite; /*ポヨンポヨンする時間*/
}
/*ボタンの上側台形部分*/
.poyon-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 poyon-btn2a {
0% { transform: scale(1.0, 1.0) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
15% { transform: scale(0.9, 0.9) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
30% { transform: scale(1.3, 0.8) translate(0%, 10%); } /*ポヨンポヨン動き調整*/
50% { transform: scale(0.8, 1.3) translate(0%, -10%); } /*ポヨンポヨン動き調整*/
70% { transform: scale(1.1, 0.9) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
100% { transform: scale(1.0, 1.0) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
}
HTML
<a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="poyon-btn2">クラウドワークス公式</a>
記事をプレビュー表示したとき
ポヨンポヨンのボタン（丸み）
CSS
/*ポヨンポヨンのボタン（丸み）*/
.poyon-btn3 {
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: poyon-btn3a 2s ease-in-out infinite; /*ポヨンポヨンする時間*/
}
@keyframes poyon-btn3a {
0% { transform: scale(1.0, 1.0) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
15% { transform: scale(0.9, 0.9) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
30% { transform: scale(1.3, 0.8) translate(0%, 10%); } /*ポヨンポヨン動き調整*/
50% { transform: scale(0.8, 1.3) translate(0%, -10%); } /*ポヨンポヨン動き調整*/
70% { transform: scale(1.1, 0.9) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
100% { transform: scale(1.0, 1.0) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
}
HTML
<a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="poyon-btn3">クラウドワークス公式</a>
記事をプレビュー表示したとき
ポヨンポヨンのボタン（ふせん）
CSS
/*ポヨンポヨンのボタン（ふせん）*/
.poyon-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: poyon-btn4a 2s ease-in-out infinite; /*ポヨンポヨンする時間*/
}
@keyframes poyon-btn4a {
0% { transform: scale(1.0, 1.0) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
15% { transform: scale(0.9, 0.9) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
30% { transform: scale(1.3, 0.8) translate(0%, 10%); } /*ポヨンポヨン動き調整*/
50% { transform: scale(0.8, 1.3) translate(0%, -10%); } /*ポヨンポヨン動き調整*/
70% { transform: scale(1.1, 0.9) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
100% { transform: scale(1.0, 1.0) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
}
HTML
<a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="poyon-btn4">クラウドワークス公式</a>
記事をプレビュー表示したとき
ポヨンポヨンのボタン（電源みたい）
CSS
/*ポヨンポヨンのボタン（電源みたい）*/
.poyon-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: poyon-btn5a 2s ease-in-out infinite; /*ポヨンポヨンする時間*/
}
.poyon-btn5 i {
line-height: 80px; /*行高さ*/
}
@keyframes poyon-btn5a {
0% { transform: scale(1.0, 1.0) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
15% { transform: scale(0.9, 0.9) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
30% { transform: scale(1.3, 0.8) translate(0%, 10%); } /*ポヨンポヨン動き調整*/
50% { transform: scale(0.8, 1.3) translate(0%, -10%); } /*ポヨンポヨン動き調整*/
70% { transform: scale(1.1, 0.9) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
100% { transform: scale(1.0, 1.0) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
}
HTML
<a href="https://crowdworks.jp" target="_blank" class="poyon-btn5" rel="noopener noreferrer"><i class="fa fa-power-off"></i></a>
記事をプレビュー表示したとき
ポヨンポヨンのボタン（色変わる）
CSS
/*ポヨンポヨンのボタン（色変わる）*/
.poyon-btn6 {
display: inline-block; /*横並び*/
padding: 0.3em 1em; /*余白*/
text-decoration: none !important; /*装飾なし*/
color: #67c5ff !important; /*文字色*/
border: solid 2px #67c5ff; /*枠線*/
border-radius: 3px; /*角丸み*/
animation: poyon-btn6a 2s ease-in-out infinite; /*ポヨンポヨンする時間*/
}
.poyon-btn6:hover {
background: #67c5ff; /*背景色*/
color: white !important; /*文字色*/
}
@keyframes poyon-btn6a {
0% { transform: scale(1.0, 1.0) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
15% { transform: scale(0.9, 0.9) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
30% { transform: scale(1.3, 0.8) translate(0%, 10%); } /*ポヨンポヨン動き調整*/
50% { transform: scale(0.8, 1.3) translate(0%, -10%); } /*ポヨンポヨン動き調整*/
70% { transform: scale(1.1, 0.9) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
100% { transform: scale(1.0, 1.0) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
}
HTML
<a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="poyon-btn6">クラウドワークス公式</a>
記事をプレビュー表示したとき
ポヨンポヨンのボタン（両端線）
CSS
/*ポヨンポヨンのボタン（両端線）*/
.poyon-btn7 {
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: poyon-btn7a 2s ease-in-out infinite; /*ポヨンポヨンする時間*/
}
.poyon-btn7:hover {
background: #668ad8 !important; /*背景色*/
color: #FFF !important; /*文字色*/
}
@keyframes poyon-btn7a {
0% { transform: scale(1.0, 1.0) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
15% { transform: scale(0.9, 0.9) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
30% { transform: scale(1.3, 0.8) translate(0%, 10%); } /*ポヨンポヨン動き調整*/
50% { transform: scale(0.8, 1.3) translate(0%, -10%); } /*ポヨンポヨン動き調整*/
70% { transform: scale(1.1, 0.9) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
100% { transform: scale(1.0, 1.0) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
}
HTML
<a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="poyon-btn7">クラウドワークス公式</a>
記事をプレビュー表示したとき
ポヨンポヨンのボタン（アイコン付き）
CSS
/*ポヨンポヨンのボタン（アイコン付き）*/
.poyon-btn8 {
display: inline-block; /*横並び*/
font-weight: bold !important; /*文字太さ*/
padding: 0.25em 0.5em; /*余白*/
text-decoration: none !important; /*装飾なし*/
color: #FFF !important; /*文字色*/
background: #00bcd4; /*背景色*/
animation: poyon-btn8a 2s ease-in-out infinite; /*ポヨンポヨンする時間*/
}
.poyon-btn8:before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f013"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 5px; /*アイコンの右側の余白*/
color: yellow;/*アイコンの色*/
}
/*ボタンの上にマウスがのったとき*/
.poyon-btn8:hover {
background: #1ec7bb; /*背景色*/
}
@keyframes poyon-btn8a {
0% { transform: scale(1.0, 1.0) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
15% { transform: scale(0.9, 0.9) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
30% { transform: scale(1.3, 0.8) translate(0%, 10%); } /*ポヨンポヨン動き調整*/
50% { transform: scale(0.8, 1.3) translate(0%, -10%); } /*ポヨンポヨン動き調整*/
70% { transform: scale(1.1, 0.9) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
100% { transform: scale(1.0, 1.0) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
}
HTML
<a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="poyon-btn8">クラウドワークス公式</a>
記事をプレビュー表示したとき
ポヨンポヨンのボタン（グラデーション）
CSS
/*ポヨンポヨンのボタン（グラデーション）*/
.poyon-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: poyon-btn9a 2s ease-in-out infinite; /*ポヨンポヨンする時間*/
}
/*ボタンの上にマウスをのせたとき*/
.poyon-btn9:hover {
background-image: linear-gradient(#6795fd 0%, #67ceff 70%); /*グラデーション*/
}
@keyframes poyon-btn9a {
0% { transform: scale(1.0, 1.0) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
15% { transform: scale(0.9, 0.9) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
30% { transform: scale(1.3, 0.8) translate(0%, 10%); } /*ポヨンポヨン動き調整*/
50% { transform: scale(0.8, 1.3) translate(0%, -10%); } /*ポヨンポヨン動き調整*/
70% { transform: scale(1.1, 0.9) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
100% { transform: scale(1.0, 1.0) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
}
HTML
<a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="poyon-btn9">クラウドワークス公式</a>
記事をプレビュー表示したとき
ポヨンポヨンのボタン（速いポヨンポヨン）
CSS
/*ポヨンポヨンのボタン（速いポヨンポヨン）*/
.poyon-btn10 {
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: poyon-btn10a 0.5s ease-in-out infinite; /*ポヨンポヨンする時間*/
}
/*ボタンの上にマウスをのせたとき*/
.poyon-btn10:hover {
background-image: linear-gradient(#fde667 0%, #ff6e67 70%); /*グラデーション*/
}
@keyframes poyon-btn10a {
0% { transform: scale(1.0, 1.0) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
15% { transform: scale(0.9, 0.9) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
30% { transform: scale(1.3, 0.8) translate(0%, 10%); } /*ポヨンポヨン動き調整*/
50% { transform: scale(0.8, 1.3) translate(0%, -10%); } /*ポヨンポヨン動き調整*/
70% { transform: scale(1.1, 0.9) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
100% { transform: scale(1.0, 1.0) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
}
HTML
<a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="poyon-btn10">クラウドワークス公式</a>
記事をプレビュー表示したとき
ポヨンポヨンのボタン（マウスの矢印をのせるとポヨンポヨン止まる）
CSS
/*ポヨンポヨンのボタン（マウスの矢印をのせるとポヨンポヨン止まる）*/
.poyon-btn11 {
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 #5e7fca; /*下線*/
animation: poyon-btn11a 2s ease-in-out infinite; /*ポヨンポヨンする時間*/
}
/*ボタンの上にマウスをのせたとき*/
.poyon-btn11:hover {
background-image: linear-gradient(#fd6767 0%, #7a67ff 70%); /*グラデーション*/
animation: poyon-btn11a 0s ease-in-out infinite; /*ポヨンポヨンする時間*/
}
@keyframes poyon-btn11a {
0% { transform: scale(1.0, 1.0) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
15% { transform: scale(0.9, 0.9) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
30% { transform: scale(1.3, 0.8) translate(0%, 10%); } /*ポヨンポヨン動き調整*/
50% { transform: scale(0.8, 1.3) translate(0%, -10%); } /*ポヨンポヨン動き調整*/
70% { transform: scale(1.1, 0.9) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
100% { transform: scale(1.0, 1.0) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
}
HTML
<a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="poyon-btn11">クラウドワークス公式</a>