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

スポンサーリンク

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

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

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

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; 
}

対象要素の概要

a要素

a リンクアンカー コピペで使えるHTML+CSS
リンクアンカーのa要素。#を使ったページ内リンクや、targetやrelといった属性と使用する値についても解説します。noopenerとブログランキングの注意点についても解説。

使用するCSSの概要

text-decoration

text-decoration 文字に線を引く コピペで使えるHTML+CSS
文字にアンダーライン、打消し線、点線を引くtext-decorationプロパティ。実際に用意されている位置、スタイルについての値、全てを例示解説します。

border-radius

border-radius 角を丸くする コピペで使えるHTML+CSS
CSSのプロパティborder-radiusはborderの角に丸みを持たせます。border-radiusを見出しやテーブル、divボックスなどに活用すれば見やすくて可愛らしいデザインを実現することができるようになります。