リンクをもっと目立たせたい！
そんな時は<button>タグを使ったボタンを使用してみましょう。
例えば当ブログのTOPページへの誘導にリンクを貼ると以下のようになります。
ブログTOPはこちら
これをボタンにすると以下のようになります。
パソコンで閲覧している場合、マウスをのせる動作（マウスホバー／マウスオーバー）で変化があります。
Bloggerブログでは記事本文に別途のCSSがないため、このボタンはCSSなしHTMLのみで使えるようにしてあります。
Bloggerブログ以外でも使用可能ですよ。
本記事ではこのボタンの作成方法や使用方法を解説します。
ボタンの基本
先ずはホバーアクションなしの、基本のボタンについて解説します。
このボタンのHTMLは以下のようになります。
<button onclick="location.href='https://blogger-narou.blogspot.com/2025/09/button.html'" style="background: royalblue; border-radius: 15px; border: 5px solid lightblue; box-shadow: cornflowerblue 5px 5px; color: white; cursor: pointer; display: block; font-weight: bold; margin-left: auto; margin-right: auto; padding: 10px 20px">ボタン文字</button>
これを変更しやすいように文字に置き換えると以下のようになります。
<button onclick="location.href='リンク先URL'" style="background: カラーコード; border-radius: ●px; border: ●px 線の種類 カラーコード; box-shadow: カラーコード 横px 縦px; color: カラーコード; cursor: pointer; display: block; font-weight: bold; margin-left: auto; margin-right: auto; padding: 横px 縦px">ボタン文字</button>
変更する部分について、一つずつ順を追って説明していきます。
location.href='リンク先URL'
リンク先URLをそのままリンク先のURLに変更して使用します。
別タブで開きたい場合は以下のように変更してください。
location.href='リンク先URL'
↓↓↓
window.open('リンク先URL')
background: カラーコード
ボタンの背景の色の指定です。
上記のボタンであれば、カラーコードの部分にroyalblueか#4169e1またはrgb(65,105,225)と入力します。どの形式でも大丈夫です。
背景が不要の場合はbackground:noneにします。
border-radius: ●px
ボタンの角を丸くする指定です。
数値が大きい程丸くなっていきます。
border: ●px 線の種類 カラーコード
枠線の指定です。
●pxで線の太さを、カラーコードで色を指定します。
線の種類は以下の通りです。
実線 solid | | 点線 dotted | | 破線 dashed | | 二重線 double |
凹枠線 groove | | 凸枠線 ridge | | 埋め込み inset | | 出っ張り outset |
枠線が不要の場合はborder: noneにします。
box-shadow: カラーコード 横px 縦px
外側の影の指定です。
カラーコードで色の指定、横pxと縦pxで影の大きさを指定します。
影をぼかしたい場合は
box-shadow: カラーコード 横px 縦px ●px
として●に数値を入れることで、影をぼかすことができます。
color: カラーコード
文字の色の指定です。
font-weight: bold
文字を太くする指定です。
不要の場合はこの一文を削除するか、font-weight: noneに変更してください。
margin-left: auto; margin-right: auto;
中央寄せの指定です。
左寄せ右寄せの場合は以下のコードに入れ替えてください。
左寄せ ➡ float: left; ／ 右寄せ ➡ float: right;
padding: 横px 縦px
ボタンの縦横の余白の指定です。
ボタンのサイズを変更できます。
ボタンのホバーアクション
ボタンの基本の変更が分かったところで、マウスをのせる動作（マウスホバー／マウスオーバー）での変化を加えていきましょう。
ただし、変化があるのはパソコンなどマウスカーソルのあるものに限ります。スマホなどのモバイル端末では分かりませんのでご了承ください。
ホバーアクションの基本は以下をセットで用います。
マウスを外した時の変化の指定 ➡ onmouseout
マウスをのせた時の変化の指定 ➡ onmouseover
マウスを外した時の変化の指定は不要に思うかもしれませんが、これがないとマウスを外す動作をしても元に戻らなくなります。
ボタンの基本で指定した色や値を指定しましょう。
また、動く速さの指定もできます。
transition: ●s
値が低ければ素早く、値が高ければゆっくりと動くような指定になります。
背景色の変化
背景色が変わるボタンです。
このHTMLは以下のようになります。
<button onclick="location.href='リンク先URL'" onmouseout="this.style.background='カラーコード①'" onmouseover="this.style.background='カラーコード②'" style="background: カラーコード①; border-radius: 15px; border: 5px solid lightblue; color: white; cursor: pointer; display: block; font-weight: bold; margin-left: auto; margin-right: auto; padding: 10px 20px; transition: ●s">背景色が変化します</button>
カラーコード①に変化前の色を、カラーコード②に変化後の色を指定します。
上記のボタンであれば、カラーコード①にはroyalblue、カラーコード②にはsalmon、●には0.3が入ります。
文字色の変化
文字の色が変わるボタンです。
このHTMLは以下のようになります。
<button onclick="location.href='リンク先URL'" onmouseout="this.style.color='カラーコード①'" onmouseover="this.style.color='カラーコード②'" style="background: royalblue; border-radius: 15px; border: 5px solid lightblue; color: カラーコード①; cursor: pointer; display: block; font-weight: bold; margin-left: auto; margin-right: auto; padding: 10px 20px; transition: ●s">文字色が変化します</button>
カラーコード①に変化前の色を、カラーコード②に変化後の色を指定します。
上記のボタンであれば、カラーコード①にはwhite、カラーコード②にはyellow、●には0.3が入ります。
拡大する
全体が拡大するボタンです。
このHTMLは以下のようになります。
<button onclick="location.href='リンク先URL'" onmouseout="this.style.transform='scale(1)'" onmouseover="this.style.transform='scale(1.1)'" style="background: royalblue; border-radius: 15px; border: 5px solid lightblue; color: white; cursor: pointer; display: block; font-weight: bold; margin-left: auto; margin-right: auto; padding: 10px 20px; transition: ●s">ボタン文字</button>
上記で1.1倍に拡大します。
拡大の値を変更したい場合は1.1の値を上下させてください。
上記のボタンであれば●には0.5が入ります。
発光する
発光したように見えるボタンです。
このHTMLは以下のようになります。
<button onclick="location.href='リンク先URL'" onmouseout="this.style.boxShadow='none'" onmouseover="this.style.boxShadow='0 0 ■px カラーコード'" style="background: royalblue; border-radius: 15px; border: 5px solid lightblue; color: white; cursor: pointer; display: block; font-weight: bold; margin-left: auto; margin-right: auto; padding: 10px 20px; transition: ●s">ボタン文字</button>
カラーコードに発光の色を、■には発光の大きさを指定します。
上記のボタンであれば、カラーコードにはaqua、■には10、●には0.5が入ります。
押せる
押すような動作をするボタンです。
このHTMLは以下のようになります。
<button onclick="location.href='リンク先URL'" onmouseout="this.style.transform='translateY(0px)'; this.style.boxShadow='0 8px カラーコード'" onmouseover="this.style.transform='translateY(5px)'; this.style.boxShadow='0 3px カラーコード'" style="background: royalblue; border-radius: 15px; border: 5px solid lightblue; box-shadow: カラーコード 0 8px; color: white; cursor: pointer; display: block; font-weight: bold; margin-left: auto; margin-right: auto; padding: 10px 20px; transition: ●s">ボタン文字</button>
box-Shadowで縦だけ値を入れることで押しボタンに見えます。
translateY(■px)はY軸（縦方向）に動かす値の指定になります。
この値はbox-Shadowで指定した影の大きさを引き算した値です。
上記では変化前8px変化後3pxなので、8-3=5となりtranslateY(5px)となるわけです。
注意点ですが、onmouseoutとonmouseoverではbox-shadowではなくbox-ShadowとSが大文字になっています。
小文字にしてしまうと上手く動作しないため、小文字と大文字は使い分けましょう。
上記のボタンの場合、カラーコードにはcornflowerblue、●には0.3入ります。
ボタンサンプル5種
上記を踏まえて、サンプルボタンをつくってみました。
参考にしてみてください。
色が反転する押せるボタン
背景の色・文字の色を変化させ、押せる風にしたボタンです。
本記事冒頭のボタンになります。
このHTMLは以下の通りです。
<button onclick="location.href='リンク先URL'" onmouseout="this.style.background='orangered'; this.style.color='gold'; this.style.transform='translateY(0px)'; this.style.boxShadow='0 8px saddlebrown'" onmouseover="this.style.background='gold'; this.style.color='orangered'; this.style.transform='translateY(5px)'; this.style.boxShadow='0 3px saddlebrown'" style="background: orangered; border-radius: 30px; border: 10px outset darkorange; box-shadow: saddlebrown 0px 8px ; color: gold; cursor: pointer; display: block; font-weight: bold; margin-left: auto; margin-right: auto; padding: 10px 20px; transition: 0.3s">サンプルボタン①</button>
スライドするボタン
背景の色を変化させ、横にスライドするボタンです。
このHTMLは以下の通りです。
<button onclick="location.href='リンク先URL'" onmouseout="this.style.background='darkgreen'; this.style.transform='translateX(0px)'; this.style.boxShadow='40px 0 darkgray'" onmouseover="this.style.background='green'; this.style.transform='translateX(40px)'; this.style.boxShadow='0 0 lightgrey'" style="background: darkgreen; border-radius: none; border: 20px ridge yellowgreen; box-shadow: darkgray 40px 0px; color: gold; cursor: pointer; display: block; font-weight: bold; margin-left: auto; margin-right: auto; padding: 10px 20px; transition: 0.2s">サンプルボタン②</button>
モノクロから発色・発光するボタン
背景の色・文字の色を変化させ、発光するように見えるボタンです。
このHTMLは以下の通りです。
<button onclick="location.href='リンク先URL'" onmouseout="this.style.background='gray'; this.style.color='lightgrey'; this.style.boxShadow='none'" onmouseover="this.style.background='blue'; this.style.color='white'; this.style.boxShadow='0 0 30px deepskyblue'" style="background: gray; border-radius: 10px; border: none; color: lightgrey; cursor: pointer; display: block; font-weight: bold; margin-left: auto; margin-right: auto; padding: 15px 30px; transition: 0.5s">サンプルボタン③</button>
発光・拡大する主張激しめのボタン
背景の色・文字の色を変化させ、拡大しながら発光するように見えるボタンです。
このHTMLは以下の通りです。
<button onclick="location.href='リンク先URL'" onmouseout="this.style.background='lightpink'; this.style.color='paleturquoise'; this.style.boxShadow='none'; this.style.transform='scale(1)'" onmouseover="this.style.background='palevioletred'; this.style.color='aqua'; this.style.boxShadow='0 0 20px lightpink'; this.style.transform='scale(1.2)'" style="background: lightpink; border-radius: 30px; border: 5px dashed mistyrose; color: paleturquoise; cursor: pointer; display: block; font-weight: bold; margin-left: auto; margin-right: auto; padding: 10px 20px; transition: 0.5s">サンプルボタン④</button>
隠しボタン
変化前の背景と文字の色を記事の背景色に指定することで隠し、うっすら発光しながら出現するようなボタンです。
枠線だけ黒色を指定してボタンの存在が分かるようにしてありますが、完全に隠すならborder:noneにしてください。
このHTMLは以下の通りです。
<button onclick="location.href='リンク先URL'" onmouseout="this.style.background='#263238'; this.style.color='#263238'; this.style.boxShadow='none'" onmouseover="this.style.background='darkorchid'; this.style.color='lavender'; this.style.boxShadow='0 0 15px darkorchid'" style="background: #263238; border-radius: 15px; border: 1px dotted black; color: #263238; cursor: pointer; display: block; font-weight: bold; margin-left: auto; margin-right: auto; padding: 10px 30px; transition: 0.8s">サンプルボタン⑤</button>
※#263238が当ブログの背景色です。
おまけ（アラートボタン）
本記事のほとんどがリンクではなく、アラートの出るダミーボタンになっています。
先頭の<button onclick="location.href='リンク先URL'"の部分を<button onclick="alert('アラートのメッセージ')"に変更することで作成できます。
上記の隠しボタンを使い、以下のようなあやしげなボタンをつくることができます。
このHTMLは以下の通りです。
<button onclick="alert('パスワードは●●●●です！')" onmouseout="this.style.background='#263238'; this.style.color='#263238'; this.style.boxShadow='none'" onmouseover="this.style.background='darkorchid'; this.style.color='lavender'; this.style.boxShadow='0 0 15px darkorchid'" style="background: #263238; border-radius: 15px; border: 1px dotted black; color: #263238; cursor: pointer; display: block; font-weight: bold; margin-left: auto; margin-right: auto; padding: 10px 30px; transition: 0.8s">秘密のページが見たい？</button>
いにしえのインターネットサイトにありそうなギミックです(笑)
ボタンをデザインしてオリジナルボタンを作成しよう！
いかがだったでしょうか？
もし難しく感じたら、先ずは色だけお好みのものに変更して取り入れてみてくださいね！
Bloggerブログでは記事をHTMLビューに変更して、そのまま貼り付ければ使用できます。
CSSなしHTMLのみのボタンデザインは、自分には結構難しくて……本記事を書くのに相当な時間を費やしてしまいました。
本記事がボタン作成に悩んでいる方の助けになっていたら嬉しいです。
