【web】アイコン付きリンクボタンの作り方
こんにちは、つちだ にんじんです。
今回は、よく見かけるアイコン付きのリンクボタンの作り方を書きます。
初心者向けにしっかり説明できたらと思います（自分も初心者）
こういうボタンです↑
色々なところでよく見かけ、汎用性の高いボタンです。
ちなみにこのボタンは、
<!---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やグラフィックデザイン、イラスト制作などのお仕事がありましたら、ぜひこちらからお気軽にお問合せください！