a リンクを角丸ボタンにするコピペで使えるHTML+CSS

HTML&CSS

2021.01.092021.01.16

リンクアンカーのa要素を修正して、角の丸い角丸ボタンを実現します。border-radiusプロパティとtext-decorationプロパティを使用します。

INDEX

リンクを角丸ボタンにする
対象要素の概要
1. a要素
使用するCSSの概要
1. text-decoration
2. border-radius

リンクを角丸ボタンにする

border-radiusで丸みの大きさを指定します。

Yahoo! Japan

style属性で記述

<a style="text-decoration: none;" href="https://www.yahoo.co.jp" target="_blank">
<span style="border-radius: 4px; padding: 5px; background-color: #993300;color:#ffffff; ">Yahoo! Japan</span>
</a>

スタイルシートで記述

<a class="a-under-none" href="https://www.yahoo.co.jp" target="_blank">
<span class="span-radius">Yahoo! Japan</span>
</a>

.a-under-none{
    text-decoration: none;
}
.span-radius{
    border-radius: 4px;
    padding: 5px;
    background-color: #993300;
    color:#ffffff; 
}