次は、ボタンの上にマウスの矢印をのせると線を引くボタンをHTMLとCSSを使ってする方法をします。
ボタンに線を引くアニメーションHTMLとCSSを使ってする方法
ワードプレスの管理画面を開きます。
左上の「投稿」を押します。
左上の「新規追加」を押します。
左上の「タイトルを追加」に「ボタンに線を引くアニメーションHTMLとCSSを使ってする方法」と入力します。
右側の「テキスト」を押します。
テキストのところにコードを貼り付けます。
テキストのところに下記のコードをコピーして、貼り付けます。
<a href="https://jomasafumi.com/" rel="noopener noreferrer" target="_blank" class="sen-hiku-btn1">続きを見る</a>
貼り付けました。
右側の「公開」を押します。
「OK」を押します。
右上の「変更をプレビュー」を押します。
「ボタンに線を引くアニメーションHTMLとCSSを使ってする方法」の
ボタンの上にマウスの矢印をのせるとボタンに線を引くことを確認します。
↑じょうまさふみに学習状況を報告すると喜びます(^^)/
HTMLとCSSの説明
CSS
/*ボタンに線を引くアニメーション（基本）*/
.sen-hiku-btn1 {
font-size: 1.5em; /*文字サイズ*/
font-weight: bold; /*太字*/
margin: 0 0 1em 0; /*ボタンの下余白*/
padding: 0.7em 1em; /*ボタン内の余白*/
text-decoration: none !important; /*装飾なし*/
color: white !important; /*文字色*/
display: inline-block; /*要素内表示*/
background: #668ad8;/*背景色*/
line-height: 1; /*行の高さ*/
}
/*ボタンの上にマウスをのせたとき*/
.sen-hiku-btn1:hover {
opacity: 0.8; /*半透明*/
}
/*線を非表示*/
.sen-hiku-btn1:after {
content: ''; /*線の表示*/
width: 0; /*幅ゼロ*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
border-bottom: 3px solid white; /*下線*/
padding-bottom: 0em; /*文字と下線の余白*/
display: block; /*表示位置*/
}
/*線を表示*/
.sen-hiku-btn1:hover:after {
width: 100%; /*横幅*/
border-bottom: 3px solid white; /*下線*/
}
HTML
<a href="https://jomasafumi.com/" rel="noopener noreferrer" target="_blank" class="sen-hiku-btn1">続きを見る</a>
「font-size: 1.5em;」は、文字のサイズを指定するためのCSSコードです。
「font-weight: bold;」は、文字を太字にするためのCSSコードです。
「margin: 0 0 1em 0;」は、ボタンの下側の余白を指定するためのCSSコードです。
「text-decoration: none;」は、文字の装飾をなしにするためのCSSコードです。
「color: white !important;」は、文字の色を指定するためのCSSコードです。
「display: inline-block;」は、ボタンから下線がはみ出ないようにするためのCSSコードです。
「line-height: 1;」は、文字の行の高さを指定するためのCSSコードです。
「opacity: 0.8;」は、マウスの矢印をボタンにのせたときに半透明にするためのCSSコードです。
「content: '';」は、下線を表示するためのCSSコードです。
「width: 0;」は、マウスの矢印を文字にのせてないときに、線を非標示にするためのCSSコードです。
「-ms-transition: all 0.3s ease;」は、下線が表示される時間を指定するためのCSSコードです
「-ms-transition」の、「-ms-」は、ブラウザーのインターネットエクスプロラーで表示させるためのコードです。
「-webkit-transition: all 0.3s ease;」は、下線が表示される時間を指定するためのCSSコードです
「webkit-transition」の、「-webkit-」は、ブラウザーのグーグルクロームとサファリで表示させるためのコードです。
「transition: all 0.3s ease;」は、下線が表示される時間を指定するためのCSSコードです。
「border-bottom: 3px solid white;」は、下線の幅と色を指定するためのCSSコードです。
「padding-bottom: 0em;」は、文字と下線の余白を指定するためのCSSコードです。
「display: block;」は、下線の位置を固定するためのCSSコードです。
「sen-hiku-btn1:hover:after」の「width: 100%;」は、マウスの矢印を文字にのせたときに、下線を幅100%で表示するためのCSSコードです。
「https://jomasafumi.com/」を、他のURLリンクに変えると、リンク先を変えることができます。
ボタンに線を引くアニメーション記入例
ボタンに線を引くアニメーション（基本）
CSS
/*ボタンに線を引くアニメーション（基本）*/
.sen-hiku-btn1 {
font-size: 1.5em; /*文字サイズ*/
font-weight: bold; /*太字*/
margin: 0 0 1em 0; /*ボタンの下余白*/
padding: 0.7em 1em; /*ボタン内の余白*/
text-decoration: none !important; /*装飾なし*/
color: white !important; /*文字色*/
display: inline-block; /*要素内表示*/
background: #668ad8;/*背景色*/
line-height: 1; /*行の高さ*/
}
/*ボタンの上にマウスをのせたとき*/
.sen-hiku-btn1:hover {
opacity: 0.8; /*半透明*/
}
/*線を非表示*/
.sen-hiku-btn1:after {
content: ''; /*線の表示*/
width: 0; /*幅ゼロ*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
border-bottom: 3px solid white; /*下線*/
padding-bottom: 0em; /*文字と下線の余白*/
display: block; /*表示位置*/
}
/*線を表示*/
.sen-hiku-btn1:hover:after {
width: 100%; /*横幅*/
border-bottom: 3px solid white; /*下線*/
}
HTML
<a href="ここにURLリンクを入れる" rel="noopener noreferrer" target="_blank" class="sen-hiku-btn1">続きを見る</a>
記事をプレビュー表示したとき
ボタンに線を引くアニメーション（二重線）
CSS
/*ボタンに線を引くアニメーション（二重線）*/
.sen-hiku-btn2 {
position: relative; /*通常の表示位置が基準*/
font-size: 1.5em; /*文字サイズ*/
font-weight: bold; /*太字*/
margin: 0 0 1em 0; /*ボタンの下余白*/
padding:1em 1em 0.7em 1em; /*ボタン内の余白*/
text-decoration: none !important; /*装飾なし*/
color: white !important; /*文字色*/
display: inline-block; /*要素内表示*/
background: red;/*背景色*/
line-height: 1; /*行の高さ*/
}
/*ボタンの上側台形部分*/
.sen-hiku-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; /*ボタン上側 色*/
}
/*ボタンの上にマウスをのせたとき*/
.sen-hiku-btn2:hover {
opacity: 0.5; /*半透明*/
}
/*線を非表示*/
.sen-hiku-btn2:after {
content: ''; /*線の表示*/
width: 0; /*幅ゼロ*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
border-bottom: 10px double yellow; /*二重線*/
padding-bottom: 0em; /*文字と下線の余白*/
display: block; /*表示位置*/
}
/*線を表示*/
.sen-hiku-btn2:hover:after {
width: 100%; /*横幅*/
border-bottom: 10px double yellow; /*二重線*/
}
HTML
<a href="ここにURLリンクを入れる" rel="noopener noreferrer" target="_blank" class="sen-hiku-btn2">続きを見る</a>
記事をプレビュー表示したとき
ボタンに線を引くアニメーション（点線）
CSS
/*ボタンに線を引くアニメーション（点線）*/
.sen-hiku-btn3 {
font-size: 1.5em; /*文字サイズ*/
font-weight: bold; /*太字*/
margin: 0 0 1em 0; /*ボタンの下余白*/
padding:1em 1em 0.7em 1em; /*ボタン内の余白*/
text-decoration: none !important; /*装飾なし*/
color: white !important; /*文字色*/
display: inline-block; /*要素内表示*/
background: #fd9535;/*背景色*/
border-radius: 4px;/*角の丸み*/
border: solid 2px #d27d00;/*線色*/
box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05) !important; /*影*/
line-height: 1; /*行の高さ*/
}
/*ボタンの上にマウスをのせたとき*/
.sen-hiku-btn3:hover {
opacity: 0.8; /*半透明*/
}
/*線を非表示*/
.sen-hiku-btn3:after {
content: ''; /*線の表示*/
width: 0; /*幅ゼロ*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
border-bottom: 5px dotted aqua; /*下線*/
padding-bottom: 0em; /*文字と下線の余白*/
display: block; /*表示位置*/
}
/*線を表示*/
.sen-hiku-btn3:hover:after {
width: 100%; /*横幅*/
border-bottom: 5px dotted aqua; /*下線*/
}
HTML
<a href="ここにURLリンクを入れる" rel="noopener noreferrer" target="_blank" class="sen-hiku-btn3">続きを見る</a>
記事をプレビュー表示したとき
ボタンに線を引くアニメーション（マーカー線）
CSS
/*ボタンに線を引くアニメーション（マーカー線）*/
.sen-hiku-btn4 {
font-size: 1.5em; /*文字サイズ*/
font-weight: bold; /*太字*/
margin: 0 0 1em 0; /*ボタンの下余白*/
padding:1em 1em 0.5em 1em; /*ボタン内の余白*/
text-decoration: none !important; /*装飾なし*/
color: #ff7c5c !important;/*文字色*/
display: inline-block; /*要素内表示*/
background: #f7f7f7; /*背景色*/
border-left: solid 6px #ff7c5c;/*左線*/
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*影*/
line-height: 1; /*行の高さ*/
}
/*ボタンの上にマウスをのせたとき*/
.sen-hiku-btn4:hover {
opacity: 0.8; /*半透明*/
}
/*線を非表示*/
.sen-hiku-btn4:after {
content: ''; /*線の表示*/
width: 0; /*幅ゼロ*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
background: linear-gradient(transparent 0%, red 100%); /*マーカー線*/
padding-bottom: 0.5em; /*文字と下線の余白*/
display: block; /*表示位置*/
}
/*線を表示*/
.sen-hiku-btn4:hover:after {
width: 100%; /*横幅*/
background: linear-gradient(transparent 0%, red 100%); /*マーカー線*/
}
HTML
<a href="ここにURLリンクを入れる" rel="noopener noreferrer" target="_blank" class="sen-hiku-btn4">続きを見る</a>
記事をプレビュー表示したとき
ボタンに線を引くアニメーション（右から線）
CSS
/*ボタンに線を引くアニメーション（右から線）*/
.sen-hiku-btn5 {
position: relative; /*通常の表示位置が基準*/
font-size: 1.5em; /*文字サイズ*/
font-weight: bold; /*太字*/
margin: 0 0 1em 0; /*ボタンの下余白*/
padding:1em 1em 1em 1em; /*ボタン内の余白*/
text-decoration: none !important; /*装飾なし*/
display: inline-block; /*要素内表示*/
color: #67c5ff !important; /*文字色*/
border: solid 2px #67c5ff; /*枠線*/
border-radius: 3px; /*角丸み*/
line-height: 1; /*行の高さ*/
}
/*ボタンの上にマウスをのせたとき*/
.sen-hiku-btn5:hover {
background: #67c5ff; /*背景色*/
color: white !important; /*文字色*/
}
/*線を非表示*/
.sen-hiku-btn5:after {
content: ''; /*線の表示*/
position: absolute; /*親要素の左上基準*/
width: 0; /*幅ゼロ*/
right: 0; /*線の始まり位置*/
bottom: 0; /*下線の位置*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
background: linear-gradient(transparent 0%, white 100%); /*マーカー線*/
padding-bottom: 0.5em; /*文字と下線の余白*/
display: block; /*表示位置*/
}
/*線を表示*/
.sen-hiku-btn5:hover:after {
width: 100%; /*横幅*/
background: linear-gradient(transparent 0%, white 100%); /*マーカー線*/
}
HTML
<a href="ここにURLリンクを入れる" rel="noopener noreferrer" target="_blank" class="sen-hiku-btn5">続きを見る</a>
記事をプレビュー表示したとき
ボタンに線を引くアニメーション（中央から線）
CSS
/*ボタンに線を引くアニメーション（中央から線）*/
.sen-hiku-btn6 {
position: relative; /*通常の表示位置が基準*/
font-size: 1.5em; /*文字サイズ*/
font-weight: bold; /*太字*/
margin: 0 0 1em 0; /*ボタンの下余白*/
padding:1em 1em 1em 1em; /*ボタン内の余白*/
text-decoration: none !important; /*装飾なし*/
display: inline-block; /*要素内表示*/
border-left: solid 4px #668ad8; /*左線*/
border-right: solid 4px #668ad8; /*右線*/
color: #668ad8 !important; /*文字色*/
background: #e1f3ff; /*背景色*/
line-height: 1; /*行の高さ*/
}
/*ボタンの上にマウスをのせたとき*/
.sen-hiku-btn6:hover {
background: #668ad8 !important; /*背景色*/
color: white !important; /*文字色*/
}
/*右線を非表示*/
.sen-hiku-btn6:before {
content: ''; /*線の表示*/
position: absolute; /*絶対配置*/
width: 0; /*幅ゼロ*/
right: 50%; /*線の始まり位置*/
bottom: 0; /*下線の位置*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
background: linear-gradient(transparent 50%, aqua 100%); /*マーカー線*/
display: block; /*表示位置*/
padding-bottom: 3em; /*線の縦幅*/
}
/*右線を表示*/
.sen-hiku-btn6:hover:before {
width: 50%; /*線の横幅*/
background: linear-gradient(transparent 50%, aqua 100%); /*マーカー線*/
}
/*左線を非表示*/
.sen-hiku-btn6:after {
content: ''; /*線の表示*/
position: absolute; /*絶対配置*/
width: 0; /*幅ゼロ*/
left: 50%; /*線の始まり位置*/
bottom: 0; /*下線の位置*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
background: linear-gradient(transparent 50%, aqua 100%); /*マーカー線*/
display: block; /*表示位置*/
padding-bottom: 3em; /*線の縦幅*/
}
/*左線を表示*/
.sen-hiku-btn6:hover:after {
width: 50%; /*線の横幅*/
background: linear-gradient(transparent 50%, aqua 100%); /*マーカー線*/
}
HTML
<a href="ここにURLリンクを入れる" rel="noopener noreferrer" target="_blank" class="sen-hiku-btn6">続きを見る</a>
記事をプレビュー表示したとき
ボタンに線を引くアニメーション（左右から線）
CSS
/*ボタンに線を引くアニメーション（左右から線）*/
.sen-hiku-btn7 {
position: relative; /*通常の表示位置が基準*/
font-size: 1.5em; /*文字サイズ*/
font-weight: bold; /*太字*/
margin: 0 0 1em 0; /*ボタンの下余白*/
padding:1em 1em 1em 1em; /*ボタン内の余白*/
text-decoration: none !important; /*装飾なし*/
display: inline-block; /*要素内表示*/
border-left: solid 4px red; /*左線*/
border-right: solid 4px red; /*右線*/
color: red !important; /*文字色*/
background: #ffefe1; /*背景色*/
line-height: 1; /*行の高さ*/
}
/*ボタンの上にマウスをのせたとき*/
.sen-hiku-btn7:hover {
background: red !important; /*背景色*/
color: white !important; /*文字色*/
}
/*右線を非表示*/
.sen-hiku-btn7:before {
content: ''; /*線の表示*/
position: absolute; /*絶対配置*/
width: 0; /*幅ゼロ*/
right: 0; /*線の始まり位置*/
bottom: 0; /*下線の位置*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
background: linear-gradient(transparent 50%, yellow 100%); /*マーカー線*/
display: block; /*表示位置*/
padding-bottom: 3em; /*線の縦幅*/
}
/*右線を表示*/
.sen-hiku-btn7:hover:before {
width: 50%; /*線の横幅*/
background: linear-gradient(transparent 50%, yellow 100%); /*マーカー線*/
}
/*左線を非表示*/
.sen-hiku-btn7:after {
content: ''; /*線の表示*/
position: absolute; /*絶対配置*/
width: 0; /*幅ゼロ*/
left: 0; /*線の始まり位置*/
bottom: 0; /*下線の位置*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
background: linear-gradient(transparent 50%, yellow 100%); /*マーカー線*/
display: block; /*表示位置*/
padding-bottom: 3em; /*線の縦幅*/
}
/*左線を表示*/
.sen-hiku-btn7:hover:after {
width: 50%; /*線の横幅*/
background: linear-gradient(transparent 50%, yellow 100%); /*マーカー線*/
}
HTML
<a href="ここにURLリンクを入れる" rel="noopener noreferrer" target="_blank" class="sen-hiku-btn7">続きを見る</a>
記事をプレビュー表示したとき
ボタンに線を引くアニメーション（線を消す）
CSS
/*ボタンに線を引くアニメーション（線を消す）*/
.sen-hiku-btn8 {
font-size: 1.5em; /*文字サイズ*/
font-weight: bold; /*太字*/
margin: 0 0 1em 0; /*ボタンの下余白*/
padding:1em 1em 0.7em 1em; /*ボタン内の余白*/
text-decoration: none !important; /*装飾なし*/
color: white !important; /*文字色*/
display: inline-block; /*要素内表示*/
background: black;/*背景色*/
border-radius: 4px;/*角の丸み*/
border: solid 2px gray;/*線色*/
box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05) !important; /*影*/
line-height: 1; /*行の高さ*/
}
/*ボタンの上にマウスをのせたとき*/
.sen-hiku-btn8:hover {
background: linear-gradient(transparent 0%, black 50%); /*背景色*/
}
/*線を非表示*/
.sen-hiku-btn8:after {
content: ''; /*線の表示*/
width: 100%; /*線の横幅*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
border-bottom: 5px solid white; /*下線*/
padding-bottom: 0em; /*文字と下線の余白*/
display: block; /*表示位置*/
}
/*線を表示*/
.sen-hiku-btn8:hover:after {
width: 0; /*幅ゼロ*/
border-bottom: 5px solid white; /*下線*/
}
HTML
<a href="ここにURLリンクを入れる" rel="noopener noreferrer" target="_blank" class="sen-hiku-btn8">続きを見る</a>