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

ボタンを光らせるHTMLとCSSを使ってする方法

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

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

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

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

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

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

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

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

貼り付けました。

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

「OK」を押します。

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

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

↑じょうまさふみに学習状況を報告すると喜びます(^^)/

HTMLとCSSの説明

CSS

/*光るボタン(基本)*/
.hikaru-btn1 {
  display: inline-block; /*文字位置*/
  position: relative; /*文字位置*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  background: #668ad8;/*背景色*/
  color: #FFF !important; /*文字色*/
  overflow: hidden; /*光のはみ出し非表示*/
}
.hikaru-btn1::after {
  position: absolute; /*光の位置*/
  content: ''; /*光の表示設定*/
  display: inline-block; /*文字の位置*/
  top: -180px; /*光の始まり位置上側*/
  left: 0; /*光の始まり位置左側*/
  width: 30px; /*光の幅*/
  height: 100%; /*光の範囲*/
  background-color: #fff; /*光の色*/
  animation: hikaru-btn1a 2s ease-in-out infinite; /*光の時間調整*/
}
@-webkit-keyframes hikaru-btn1a {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; } /*光の角度調整*/
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; } /*光の角度調整*/
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; } /*光の角度調整*/
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; } /*光の角度調整*/
}

HTML

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

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

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

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

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

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

「overflow: hidden」は、アイコン以外のところの光を非表示にするためのCSSコードです。

「content」は、光を表示するためのCSSコードです。

「left」は、光の始まる左側の位置を指定するためのCSSコードです。

「width」は、光の幅を指定するためのCSSコードです。

「height」は、光の高さを指定するためのCSSコードです。

「background-color」は、光の色を指定するためのCSSコードです。

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

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

「webkit-transform」は、光の動きを調整するCSSコードです。

「scale」は、光の大きさを調整するCSSコードです。

「rotate」は、光の角度を調整するCSSコードです。

「opacity」は、光の半透明を調整するCSSコードです。

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

光るボタン記入例

光るボタン(基本)

CSS

/*光るボタン(基本)*/
.hikaru-btn1 {
  display: inline-block; /*文字位置*/
  position: relative; /*文字位置*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  background: #668ad8;/*背景色*/
  color: #FFF !important; /*文字色*/
  overflow: hidden; /*光のはみ出し非表示*/
}
.hikaru-btn1::after {
  position: absolute; /*光の位置*/
  content: ''; /*光の表示設定*/
  display: inline-block; /*文字の位置*/
  top: -180px; /*光の始まり位置上側*/
  left: 0; /*光の始まり位置左側*/
  width: 30px; /*光の幅*/
  height: 100%; /*光の範囲*/
  background-color: #fff; /*光の色*/
  animation: hikaru-btn1a 2s ease-in-out infinite; /*光の時間調整*/
}
@-webkit-keyframes hikaru-btn1a {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; } /*光の角度調整*/
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; } /*光の角度調整*/
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; } /*光の角度調整*/
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; } /*光の角度調整*/
}

HTML

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

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

光るボタン(上下に線)

CSS

/*光るボタン(上下に線)*/
.hikaru-btn2 {
  display: inline-block; /*横並び*/
  position: relative; /*通常の表示位置が基準*/
  padding: 0.35em 1em; /*余白*/
  background: red;/*背景色*/
  color: #FFF !important; /*文字色*/
  text-decoration: none !important; /*装飾なし*/
  overflow: hidden; /*光のはみ出し非表示*/
  border-bottom: solid 5px black;
  border-top: solid 5px black;
}
.hikaru-btn2::after {
  position: absolute; /*光の位置*/
  content: ''; /*光の表示設定*/
  display: inline-block; /*文字の位置*/
  top: -180px; /*光の始まり位置上側*/
  left: 0; /*光の始まり位置左側*/
  width: 30px; /*光の幅*/
  height: 100%; /*光の範囲*/
  background-color: #fff; /*光の色*/
  animation: hikaru-btn2a 2s ease-in-out infinite; /*光の時間調整*/
}
@-webkit-keyframes hikaru-btn2a {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; } /*光の角度調整*/
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; } /*光の角度調整*/
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; } /*光の角度調整*/
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; } /*光の角度調整*/
}

HTML

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

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

光るボタン(丸み)

CSS

/*光るボタン(丸み)*/
.hikaru-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;/*線色*/
  overflow: hidden; /*光のはみ出し非表示*/
}
.hikaru-btn3::after {
  position: absolute; /*光の位置*/
  content: ''; /*光の表示設定*/
  display: inline-block; /*文字の位置*/
  top: -180px; /*光の始まり位置上側*/
  left: 0; /*光の始まり位置左側*/
  width: 30px; /*光の幅*/
  height: 100%; /*光の範囲*/
  background-color: #fff; /*光の色*/
  animation: hikaru-btn3a 2s ease-in-out infinite; /*光の時間調整*/
}
@-webkit-keyframes hikaru-btn3a {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; } /*光の角度調整*/
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; } /*光の角度調整*/
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; } /*光の角度調整*/
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; } /*光の角度調整*/
}

HTML

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

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

光るボタン(ふせん)

CSS

/*光るボタン(ふせん)*/
.hikaru-btn4 {
  position: relative; /*通常の表示位置が基準*/
  display: inline-block; /*横並び*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  background: #fbff89; /*背景色*/
  border-left: solid 6px #19cc00;/*左線*/
  color: #717171 !important;/*文字色*/
  font-weight: bold; /*文字太さ*/
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*影*/
  overflow: hidden; /*光のはみ出し非表示*/
}
.hikaru-btn4::after {
  position: absolute; /*光の位置*/
  content: ''; /*光の表示設定*/
  display: inline-block; /*文字の位置*/
  top: -180px; /*光の始まり位置上側*/
  left: 0; /*光の始まり位置左側*/
  width: 30px; /*光の幅*/
  height: 100%; /*光の範囲*/
  background-color: #fff; /*光の色*/
  animation: hikaru-btn4a 2s ease-in-out infinite; /*光の時間調整*/
}
@-webkit-keyframes hikaru-btn4a {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; } /*光の角度調整*/
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; } /*光の角度調整*/
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; } /*光の角度調整*/
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; } /*光の角度調整*/
}

HTML

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

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

光るボタン(電源みたい)

CSS

/*光るボタン(電源みたい)*/
.hikaru-btn5 {
  position: relative; /*通常の表示位置が基準*/
  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; /*線色*/
  overflow: hidden; /*光のはみ出し非表示*/
}
.hikaru-btn5 i {
  line-height: 80px; /*行高さ*/
}
.hikaru-btn5::after {
  position: absolute; /*光の位置*/
  content: ''; /*光の表示設定*/
  display: inline-block; /*文字の位置*/
  top: -180px; /*光の始まり位置上側*/
  left: 0; /*光の始まり位置左側*/
  width: 30px; /*光の幅*/
  height: 100%; /*光の範囲*/
  background-color: #fff; /*光の色*/
  animation: hikaru-btn5a 2s ease-in-out infinite; /*光の時間調整*/
}
@-webkit-keyframes hikaru-btn5a {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; } /*光の角度調整*/
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; } /*光の角度調整*/
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; } /*光の角度調整*/
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; } /*光の角度調整*/
}

HTML

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

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

光るボタン(色変わる)

CSS

/*光るボタン(色変わる)*/
.hikaru-btn6 {
  position: relative; /*通常の表示位置が基準*/
  display: inline-block; /*横並び*/
  padding: 0.3em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  color: #67c5ff !important; /*文字色*/
  border: solid 2px #67c5ff; /*枠線*/
  border-radius: 3px; /*角丸み*/
  overflow: hidden; /*光のはみ出し非表示*/
}
.hikaru-btn6:hover {
  background: #67c5ff; /*背景色*/
  color: white !important; /*文字色*/
}
.hikaru-btn6::after {
  position: absolute; /*光の位置*/
  content: ''; /*光の表示設定*/
  display: inline-block; /*文字の位置*/
  top: -180px; /*光の始まり位置上側*/
  left: 0; /*光の始まり位置左側*/
  width: 30px; /*光の幅*/
  height: 100%; /*光の範囲*/
  background-color: #fff; /*光の色*/
  animation: hikaru-btn6a 2s ease-in-out infinite; /*光の時間調整*/
}
@-webkit-keyframes hikaru-btn6a {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; } /*光の角度調整*/
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; } /*光の角度調整*/
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; } /*光の角度調整*/
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; } /*光の角度調整*/
}

HTML

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

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

光るボタン(両端線)

CSS

/*光るボタン(両端線)*/
.hikaru-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; /*背景色*/
  overflow: hidden; /*光のはみ出し非表示*/
}
.hikaru-btn7:hover {
  background: #668ad8 !important; /*背景色*/
  color: #FFF !important; /*文字色*/
}
.hikaru-btn7::after {
  position: absolute; /*光の位置*/
  content: ''; /*光の表示設定*/
  display: inline-block; /*文字の位置*/
  top: -180px; /*光の始まり位置上側*/
  left: 0; /*光の始まり位置左側*/
  width: 30px; /*光の幅*/
  height: 100%; /*光の範囲*/
  background-color: #fff; /*光の色*/
  animation: hikaru-btn7a 2s ease-in-out infinite; /*光の時間調整*/
}
@-webkit-keyframes hikaru-btn7a {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; } /*光の角度調整*/
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; } /*光の角度調整*/
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; } /*光の角度調整*/
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; } /*光の角度調整*/
}

HTML

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

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

光るボタン(アイコン付き)

CSS

/*光るボタン(アイコン付き)*/
.hikaru-btn8 {
  position: relative; /*通常の表示位置が基準*/
  display: inline-block; /*横並び*/
  font-weight: bold !important; /*文字太さ*/
  padding: 0.25em 0.5em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  color: #FFF !important; /*文字色*/
  background: #00bcd4; /*背景色*/
  overflow: hidden; /*光のはみ出し非表示*/
}
.hikaru-btn8:before {
  font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
  content: "\f013"; /*アイコンの種類*/
  font-weight: bold; /*太字*/
  padding-right: 5px; /*アイコンの右側の余白*/
  color: yellow;/*アイコンの色*/
}
/*ボタンの上にマウスがのったとき*/
.hikaru-btn8:hover {
  background: #1ec7bb; /*背景色*/
}
.hikaru-btn8::after {
  position: absolute; /*光の位置*/
  content: ''; /*光の表示設定*/
  display: inline-block; /*文字の位置*/
  top: -180px; /*光の始まり位置上側*/
  left: 0; /*光の始まり位置左側*/
  width: 30px; /*光の幅*/
  height: 100%; /*光の範囲*/
  background-color: #fff; /*光の色*/
  animation: hikaru-btn8a 2s ease-in-out infinite; /*光の時間調整*/
}
@-webkit-keyframes hikaru-btn8a {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; } /*光の角度調整*/
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; } /*光の角度調整*/
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; } /*光の角度調整*/
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; } /*光の角度調整*/
}

HTML

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

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

大きくなるボタン(グラデーション)

CSS

/*光るボタン(グラデーション)*/
.hikaru-btn9 {
  position: relative; /*通常の表示位置が基準*/
  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; /*下線*/
  overflow: hidden; /*光のはみ出し非表示*/
}
/*ボタンの上にマウスをのせたとき*/
.hikaru-btn9:hover {
  background-image: linear-gradient(#6795fd 0%, #67ceff 70%); /*グラデーション*/
}
.hikaru-btn9::after {
  position: absolute; /*光の位置*/
  content: ''; /*光の表示設定*/
  display: inline-block; /*文字の位置*/
  top: -180px; /*光の始まり位置上側*/
  left: 0; /*光の始まり位置左側*/
  width: 30px; /*光の幅*/
  height: 100%; /*光の範囲*/
  background-color: #fff; /*光の色*/
  animation: hikaru-btn9a 2s ease-in-out infinite; /*光の時間調整*/
}
@-webkit-keyframes hikaru-btn9a {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; } /*光の角度調整*/
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; } /*光の角度調整*/
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; } /*光の角度調整*/
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; } /*光の角度調整*/
}

HTML

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

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