【web】アイコン付きリンクボタンの作り方

2024年6月1日 16:14

こんにちは、つちだにんじんです。
今回は、よく見かけるアイコン付きのリンクボタンの作り方を書きます。
初心者向けにしっかり説明できたらと思います（自分も初心者）

こういうボタンです↑
色々なところでよく見かけ、汎用性の高いボタンです。

ちなみにこのボタンは、

<!---HTML-->
<a href="URL">
    <div class="text">問合せはこちら</div>
    <div class="icon"></div>
</a>

/*CSS*/
a{
  text-decoration: none;
  background: #ffcc00;
  display: block;
  width: fit-content;
  color: #333300;
  font-weight: bold;
  padding: 10px 50px;
  border-radius: 100vh;
  display: flex;
  align-items: center;
}
.icon{
  border-bottom: 2px solid #333300;
  border-right: 2px solid #333300;
  width: 10px; 
  height: 10px;
  transform: rotate(-45deg);
}
.text{
  padding-right: 20px;
}

こんな風に作られています。
マウスオーバーで変化をつけたらバッチリ使えそうです。
では作り方の解説をします。

作り方

HTML

作り方って書くと３分クッキングみたいですね。
美味しいリンクボタンを作っていきましょう。

HTMLですが、aタグの中に「divで括ったテキスト」と、「divで括ったアイコン」が入っている状態にします。

<a href="URL">
    <div class="text">問合せはこちら</div>
    <div class="icon"></div>
</a>

理由は、このdiv要素をcssのflexで横並びにするからです。
div class="icon"の中身はcssで矢印を作るので、中身は空でOKです。
アイコンの部分を画像にしたい場合などは、この中に画像を入れるといいです。

<a href="URL">
    <div class="text">問合せはこちら</div>
    <div class="icon">
　　　　　　　　　　　　　<img src="画像URL">
　　　　　　　　</div>
</a>

画像にする場合はこんな感じです。

これでHTMLはOKです。
クッキングの下準備完了ですね。

CSS

ここららはcssで調理、味付けしていきます。

まずはわかりやすいようにaタグの背景に色をつけたり、テキストを太字にしたり簡単な装飾をします。

/*css*/
a{
  text-decoration: none;     /*デフォルトの装飾を無効化*/
  background: #ffcc00;     /*背景色*/
  display: block;     /*ブロック要素に変換*/
  width: fit-content;     /*横幅をコンテンツに合わせる*/
  color: #333300;     /*テキストの色*/
  font-weight: bold;     /*テキストを太字*/
}

見た目はこんな感じです↓

次に、div class="icon"の中にアイコンを作っていきます。

/*css*/
.icon{
  border-bottom: 2px solid #333300;
  border-right: 2px solid #333300;
  width: 10px; 
  height: 10px;
  transform: rotate(-45deg);     /*向きを-45度傾ける*/
}

widthとheightを指定することで10px × 10pxの箱ができ、その箱の底辺に線をつけるのがborder-bottom、箱の右の辺に線をつけるのがborder-rightです。それを回転させています。
これで、ボタンはこんな感じになったと思います。↓

まだflexで横並びにしていないので、div要素がそのまま縦並びになっている状態です。
これを横並びにしていきます。

/*css*/
a{
  text-decoration: none;
  background: #ffcc00;
  display: block;
  width: fit-content;
  color: #333300;
  font-weight: bold;
  display: flex;     /*追加:横並びにする*/
  align-items: center;     /*追加:flex要素を上下中央揃え*/
}

「display: flex;」と「align-items: center;」を書き足してこんな感じに↓

「display: flex;」は要素を横並びにするものです。
「align-items: center;」は横並びにした要素たちを、上下中央揃えにするものです。
ちなみに、align-itemsはflexにした要素でないと適応できません。

あとは、見た目の調整をします。
味付けってところでしょうか。

/*css*/
a{
  text-decoration: none;
  background: #ffcc00;
  display: block;
  width: fit-content;
  color: #333300;
  font-weight: bold;
  display: flex;
  align-items: center;
 padding: 10px 50px;     /*追加:ボタン全体の幅を調整*/
  border-radius: 100vh;     /*追加:ボタンの角を丸くした*/
}
 .text{
  padding-right: 20px;     /*追加:テキストとアイコンの余白調整*/
}

完成したのがこちらです↑
美味しそうにできましたね。

完成したcssを全部まとめるとこうなります↓

/*CSS*/
a{
  text-decoration: none;
  background: #ffcc00;
  display: block;
  width: fit-content;
  color: #333300;
  font-weight: bold;
  padding: 10px 50px;
  border-radius: 100vh;
  display: flex;
  align-items: center;
}
.icon{
  border-bottom: 2px solid #333300;
  border-right: 2px solid #333300;
  width: 10px; 
  height: 10px;
  transform: rotate(-45deg);
}
.text{
  padding-right: 20px;
}

マウスオーバー

余談として、マウスオーバーでの変化もつけておきます。
隠し味ってやつです。

/*css*/
a{
  text-decoration: none;
  background: #ffcc00;
  display: block;
  width: fit-content;
  color: #333300;
  font-weight: bold;
  padding: 10px 50px;
  border-radius: 100vh;
  display: flex;
  align-items: center;
  border: 2px solid #ffcc00;
  transition: .3s;     /*追加:マウスオーバー戻る時ゆっくりにする*/
}
.icon{
  border-bottom: 2px solid #333300;
  border-right: 2px solid #333300;
  width: 10px; 
  height: 10px;
  transform: rotate(-45deg);
  transition: .3s;　　　　　/*追加:マウスオーバー戻る時ゆっくりにする*/
}
 .text{
  padding-right: 20px;
}
/* -----ここから下 追加したところ----- */
a:hover{
  background: #fff;     /*マウスオーバーで背景を白*/
  transition: .2s;　　　　　/*徐々に変化をつける*/
}
a:hover .icon{
  transform: translateX(20px) rotate(-45deg);　　　　　/*マウスオーバー時右に移動*/
  transition: .2s;　　　　　/*徐々に変化をつける*/
}

これは隠し味なんで説明はしません（面倒）

以上、今週の３分クッキングでした。
また来週！

私のHPです。
webやグラフィックデザイン、イラスト制作などのお仕事がありましたら、ぜひこちらからお気軽にお問合せください！

この記事が気に入ったらサポートをしてみませんか？