aタグでボタンを作る

今回は､aタグでボタンを作る方法です｡こんな感じになります｡

マウスの矢印をボタンの上に持って行くと､色が変わります｡PCのみ動作がわかります｡スマホで見ると､変わらないと思います｡

HTML

HTMLは以下になります｡

<a href="#" class="button">button</a>

単純なHTMLです｡#の部分にリンクさせたいURLを書きます｡別のページで開きたい場合は､こんな感じで書きます｡

<a href="#" class="button" target="_blank">button</a>

｢target="_blank"｣を書き加えます｡割と簡単です｡

CSSは以下になります｡

CSS

.button {
  background: rgb(0, 103, 187);
  padding: 1rem;
  color: rgb(255, 255, 255);
}
.button:hover {
  background: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
}

buttonにCSSでデザインを書きます｡ここでは､背景と文字色を変えています｡hoverでマウスの矢印をボタンに乗せた時にのデザインを書いています｡

ページ幅と同じにしたい場合

ページ幅と同じにしたい場合は､以下になります｡こんな感じですね｡

｢.button｣にdisplay:blockと､width:100%を追記し､実現できます｡まとめたCSSはこちら｡

.button {
  display: block;
  width: 100%;
  background: rgb(0, 103, 187);
  padding: 1rem;
  color: rgb(255, 255, 255);
}
.button:hover {
  background: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
}

さいごに

ホームページやブログでリンクを張るのはメジャーだと思います｡割と簡単なので､お試しあれ｡バックアップを取ってから､するように｡失敗すると､大変です｡