CSSのみで実装するボタン、テキストリンク、hoverスタイル19選
CSSだけでも表現できるデザインが増えてきまして、疑似要素::beforeや::afterなどを駆使することでボタンやテキストリンクへさまざまな装飾することができるようになりました。今回は全部で19パターンのデザインをCSSのみで実装する方法をご紹介します。あなたの現場でぜひご利用ください。
CSSボタンのスタイル
CSSボタンは11パターンあります。すべてのデザインに共通したCSSがありますので以下のコードをコピペした後に、実装したいボタンのCSSをコピペしてください。
CSSボタンの共通スタイル
.btn a {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 300px;
height: 60px;
color: #333;
font-size: 18px;
font-weight: 700;
text-decoration: none;
transition: 0.3s;
}
.btn a:hover {
color: #f2f2f2;
}背景色とラインのCSSボタン
<div class="btn btn01">
<a href="">私たちについて</a>
</div>.btn01 a {
background-color: #ceb849;
border: 1px solid #ceb849;
}
.btn01 a:hover {
background-color: #B99b00;
border: 1px solid #333;
}
.btn01 a::after {
content: '';
position: absolute;
top: 50%;
right: -35px;
transform: translateY(-50%);
width: 70px;
height: 1px;
background-color: #333;
}背景色にラインの組み合わせ。最近よく見かけるデザインですね。hover時は背景色と枠線が変化します。
背景色と角丸、ラインのCSSボタン
<div class="btn btn02">
<a href="">私たちについて</a>
</div>.btn02 a {
background-color: #ceb849;
border: 1px solid #ceb849;
border-radius: 35px;
}
.btn02 a:hover {
background-color: #B99b00;
border: 1px solid #333;
}
.btn02 a::before {
content: '';
position: absolute;
top: calc(50% - 5px);
right: -35px;
transform: rotate(30deg);
width: 12px;
height: 1px;
background-color: #333;
}
.btn02 a::after {
content: '';
position: absolute;
top: 50%;
right: -35px;
transform: translateY(-50%);
width: 70px;
height: 1px;
background-color: #333;
}『背景色とライン』に角丸を加えたデザイン。角を軽く丸める程度ではなくこのくらい丸くするとボタンと認識しやすくなります。
背景色とライン、ずらした枠線のCSSボタン
<div class="btn btn03">
<a href="">私たちについて</a>
</div>.btn03 a {
background-color: #ceb849;
border: 1px solid transparent;
}
.btn03 a::before {
content: '';
position: absolute;
top: -5px;
left: -5px;
width: 100%;
height: 100%;
background-color: transparent;
border: 1px solid #333;
}
.btn03 a::after {
content: '';
position: absolute;
top: 50%;
right: -35px;
transform: translateY(-50%);
width: 70px;
height: 1px;
background-color: #333;
}
.btn03 a:hover {
background-color: #B99b00;
}枠線をずらしたデザイン。疑似要素::beforeで枠線を表現しています。
背景色とずらした枠線を角丸にするCSSボタン
<div class="btn btn04">
<a href="">私たちについて</a>
</div>.btn04 a {
background-color: #ceb849;
border: 1px solid transparent;
border-radius: 35px;
}
.btn04 a::before {
content: '';
position: absolute;
top: -5px;
left: -5px;
width: 100%;
height: 100%;
background-color: transparent;
border: 1px solid #333;
border-radius: 35px;
}
.btn04 a:hover {
background-color: #B99b00;
}背景色とずらした枠線を角丸にしたパターン。横のラインは使えないので、必要であればspanを使って表現するといいかと。
背景色、線と丸のアイコンのCSSボタン
<div class="btn btn05">
<a href="">私たちについて</a>
</div>.btn05 a {
background-color: #ceb849;
border: 1px solid transparent;
}
.btn05 a::before {
content: '';
position: absolute;
top: 50%;
right: 25px;
transform: translateY(-50%);
width: 30px;
height: 1px;
background-color: #333;
}
.btn05 a::after {
content: '';
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
width: 20px;
height: 20px;
background-color: transparent;
border: 1px solid #333;
border-radius: 50%;
}
.btn05 a:hover {
background-color: #B99b00;
border: 1px solid #333;
}
.btn05 a:hover::before {
background-color: #f2f2f2;
}
.btn05 a:hover::after {
border: 1px solid #f2f2f2;
}アイコンは疑似要素使って、::beforeでラインを、::afterで円を表現しています。
矢印のCSSボタン
<div class="btn btn06">
<a href="">私たちについて</a>
</div>.btn06 a::after {
content: '';
position: absolute;
top: 50%;
right: 20px;
transform: rotate(45deg) translateY(-50%);
width: 6px;
height: 6px;
border-width: 2px 2px 0 0;
border-style: solid;
border-color: #333;
}
.btn06 a:hover {
background-color: #B99b00;
border: 1px solid #333;
}
.btn06 a:hover::after {
border-color: #f2f2f2 #f2f2f2 transparent transparent;
}矢印を疑似要素::afterを使ってCSSで実装します。borderを上と右にborder: 2px solid #333を指定。それ以外はborder-widthで0pxを指定しているので表示されません。それをtransform: rotate(45deg)で45度回転させると矢印を表現しています。もちろん他の向きも実装できます。
矢印と丸のCSSボタン
<div class="btn btn07">
<a href="">私たちについて</a>
</div>.btn07 a {
background-color: #ceb849;
border: 1px solid transparent;
}
.btn07 a::before {
content: '';
position: absolute;
top: 50%;
right: 27px;
transform: translateY(-50%);
width: 20px;
height: 20px;
background-color: transparent;
border: 1px solid #333;
border-radius: 50%;
}
.btn07 a::after {
content: '';
position: absolute;
top: calc(50% - 1px);
right: 27px;
transform: rotate(45deg) translateY(-50%);
width: 6px;
height: 6px;
border-width: 1px 1px 0 0;
border-style: solid;
border-color: #333 #333 transparent transparent;
}
.btn07 a:hover {
background-color: #B99b00;
border: 1px solid #333;
}
.btn07 a:hover::before {
border: 1px solid #f2f2f2;
}
.btn07 a:hover::after {
border-color: #f2f2f2 #f2f2f2 transparent transparent;
}よく見かける矢印を丸で囲ったものをCSSで実装します。先程の矢印を::afterで表現し、丸を::beforeで。
丸のサイズと配置を調整するところだけ手間ですが、意外とシンプルで簡単に実装できます。
ずらした斜線背景のCSSボタン
<div class="btn btn08">
<a href="">私たちについて</a>
</div>.btn08 a span {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
height: 100%;
background-color: #ceb849;
border: 1px solid transparent;
z-index: 2;
}
.btn08 a::before {
content: '';
position: absolute;
bottom: -5px;
right: -5px;
width: 100%;
height: 100%;
background-image: repeating-linear-gradient(-45deg, #BAB38C, #BAB38C 3px, transparent 0, transparent 6px);
z-index: 1;
}
.btn08 a:hover span {
background-color: #B99b00;
border: 1px solid #333;
}斜線で作成した背景をずらしてポップなボタンを表現しました。疑似要素::beforeで斜線背景を実装。
テキストをspanで囲ったのは、重なり問題のためです。そのままだと::beforeが上に重なりテキストが表示されません。また、::beforeをz-index: -1にすると他要素との都合で::beforeが最下層に移動してしまい表示されないケースがあります。それらの問題を解消するために、spanをz-index: 2、::beforeをz-index: 1にして重なり順を決めています。もしほか要素との都合がなければspanを無しにして::beforeをz-index: -1でも実装可能です。
ずらした塗りつぶし背景のCSSボタン
<div class="btn btn09">
<a href="">私たちについて</a>
</div>.btn09 a span {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
height: 100%;
background-color: #ceb849;
border: 1px solid transparent;
z-index: 2;
}
.btn09 a::after {
content: '';
position: absolute;
bottom: -5px;
right: -5px;
width: 100%;
height: 100%;
background-color: #bab38c;
z-index: 1;
}
.btn09 a:hover span {
background-color: #B99b00;
border: 1px solid #333;
}ずらした斜線背景の塗りつぶしパターンです。斜線の場合はポップさが出てしまうので使えるテイストは限られてしまいますが、塗りつぶしであれば広いジャンルで使用可能です。シンプルにボタンを表現したい場合はこちらをおすすめします。
三角矢印のCSSボタン
<div class="btn btn10">
<a href="">私たちについて</a>
</div>.btn10 a {
background-color: #ceb849;
border: 1px solid transparent;
}
.btn10 a::after {
content: '';
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 8px;
border-color: transparent transparent transparent #333;
}
.btn10 a:hover {
background-color: #B99b00;
border: 1px solid #333;
}
.btn10 a:hover::after {
border-color: transparent transparent transparent #f2f2f2;
}シンプルでよく見かける三角矢印で、使う機会が多いデザインです。実装方法を覚えておくと便利かと。
二等辺三角の矢印を角に配置のCSSボタン
<div class="btn btn11">
<a href="">私たちについて</a>
</div>.btn11 a {
background-color: #ceb849;
border: 1px solid transparent;
}
.btn11 a::after {
content: '';
position: absolute;
bottom: 10px;
right: 10px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 12px 12px;
border-color: transparent transparent #333 transparent;
}
.btn11 a:hover {
background-color: #B99b00;
border: 1px solid #333;
}
.btn11 a:hover::after {
border-color: transparent transparent #f2f2f2 transparent;
}三角矢印を二等辺三角形にして角に配置するパターンです。ボタンだけではなく、お知らせ一覧リストのリンクにも使えるのでこちらも使用機会は多いかと。私はよく実装しています。
ちなみに、三角形をCSSで実装する際は、CSS三角形作成ツールを使うと便利です。
テキストリンクのhoverスタイル
テキストリンクは8パターンあります。いずれもヘッダーナビゲーションのような短いフレーズに最適なスタイルです。テキストにカーソルをのせて変化を確認してください。
テキストリンクの共通CSS
すべてのデザインで共通のCSSコードをコピペした後に、実装したいhoverスタイルのCSSをコピペしてください。
.textlink a {
position: relative;
color: #333;
text-decoration: none;
}
.textlink a:hover {
color: #b99b00;
}下線を中央から両端へアニメーション
<p class="textlink textlink01"><a href="">私たちについて</a></p>.textlink01 a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: #ceb849;
transform: scaleX(0);
transition: transform 0.3s;
}
.textlink01 a:hover::after {
transform: scaleX(1);
}transform: scaleXで要素の拡大縮小ができます。transform: scaleX(0)で疑似要素::afterのサイズを0にして、hover時にtransform: scaleX(1)で要素を拡大（等倍）しています。
下線を左から右へアニメーション
<p class="textlink textlink02"><a href="">私たちについて</a></p>.textlink02 a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: #ceb849;
transition: width 0.3s;
}
.textlink02 a:hover::after {
width: 100%;
}左から右へ下線を引いていくアニメーションです。hoverすることでwidth: 0からwidth: 100%へ変化させています。left: 0;で要素の左が起点になっていまして、right: 0を指定すると右が起点になり、左へ向かってアニメーションしていきます。
蛍光ペンのような下線のアニメーション
<p class="textlink textlink03"><a href="">私たちについて</a></p>.textlink03 a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 10px;
background-color: rgba(185,155,0,0.5);
transition: width 0.3s;
}
.textlink03 a:hover::after {
width: 100%;
}疑似要素::afterで蛍光ペンのような半透明の下線を表現しています。こちらもhoverすることでwidth: 0からwidth: 100%へ変化します。
円のアニメーション
<p class="textlink textlink04"><a href="">私たちについて</a></p>.textlink04 a::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
background-color: rgba(185,155,0,0.5);
border-radius: 50%;
transition: 0.3s;
}
.textlink04 a:hover::after {
width: 40px;
height: 40px;
}リンクテキストの中心から円がアニメーションしながら表示させる仕様です。width: 0とheight: 0の状態から、width: 40pxとheight: 40pxへ変化させています。色や透明度、円のサイズを変えると印象ががらっと変わりますので、色々試してみてください。
リンク下部の円に半透明な円をアニメーション
<p class="textlink textlink05"><a href="">私たちについて</a></p>.textlink05 a {
padding-bottom: 20px;
}
.textlink05 a::before {
content: '';
position: absolute;
bottom: 3px;
left: 50%;
transform: translateX(-50%);
width: 6px;
height: 6px;
background-color: rgba(185,155,0,1);
border-radius: 50%;
transition: 0.3s;
}
.textlink05 a::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%) scaleX(0);
width: 12px;
height: 12px;
background-color: rgba(185,155,0,0.5);
border-radius: 50%;
transition: transform 0.3s;
}
.textlink05 a:hover::after {
transform: translateX(-50%) scaleX(1);
}通常時に小さい円を表示。hover時に半透明の円がアニメーションしながら表示される仕様です。hover時にテキストへ装飾したくない時に使えます。
外部リンクのスタイル
<p class="textlink textlink06"><a href="">私たちについて</a></p>.textlink06 a[target=_blank] {
padding-right: 20px;
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22feather%20feather-external-link%22%3E%3Cpath%20d%3D%22M18%2013v6a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2h6%22%3E%3C%2Fpath%3E%3Cpolyline%20points%3D%2215%203%2021%203%2021%209%22%3E%3C%2Fpolyline%3E%3Cline%20x1%3D%2210%22%20y1%3D%2214%22%20x2%3D%2221%22%20y2%3D%223%22%3E%3C%2Fline%3E%3C%2Fsvg%3E');
background-size: 16px;
background-repeat: no-repeat;
background-position: right center;
}
.textlink06 a[target=_blank]:hover {
color: #ceb849;
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23B99b00%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22feather%20feather-external-link%22%3E%3Cpath%20d%3D%22M18%2013v6a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2h6%22%3E%3C%2Fpath%3E%3Cpolyline%20points%3D%2215%203%2021%203%2021%209%22%3E%3C%2Fpolyline%3E%3Cline%20x1%3D%2210%22%20y1%3D%2214%22%20x2%3D%2221%22%20y2%3D%223%22%3E%3C%2Fline%3E%3C%2Fsvg%3E');
}テキストの外部リンクに自動でアイコンを付与するスタイルです。padding-right: 20pxでテキストリンクの右側にアイコン分の余白を開けて、background-imageでアイコンを指定しています。今回アイコンはSVGデータをCSSのbackground-image向けのBase64コードに変換するツールを使って実装しています。もちろん他の方法でもOKです。
シンプル矢印
<p class="textlink textlink07"><a href="">私たちについて</a></p>.textlink07 a {
padding-right: 50px;
}
.textlink07 a::before {
content: '';
position: absolute;
top: calc(50% - 4px);
right: 0;
transform: rotate(30deg);
width: 12px;
height: 1px;
background-color: #333;
}
.textlink07 a::after {
content: '';
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 40px;
height: 1px;
background-color: #333;
}
.textlink07 a:hover::before {
background-color: #ceb849;
}
.textlink07 a:hover::after {
background-color: #ceb849;
}疑似要素2つを使って矢印を表現しています。transform: rotate(30deg)で回転させているのでtop: 50%だと位置がずれてしまうので、-4pxのように調整しています。矢印のサイズによってはずれることがありますので、top: calc(50% - 4px);の4pxを変更して位置を調整してください。
矢印と丸
<p class="textlink textlink08"><a href="">私たちについて</a></p>.textlink08 a {
padding-right: 30px;
}
.textlink08 a::before {
content: '';
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 15px;
height: 15px;
background-color: transparent;
border: 3px solid #bbb;
border-radius: 50%;
}
.textlink08 a::after {
content: '';
position: absolute;
top: calc(50% - 3px);
right: 9px;
transform: rotate(45deg);
width: 4px;
height: 4px;
border-width: 2px 2px 0 0;
border-style: solid;
border-color: #333 #333 transparent transparent;
}
.textlink08 a:hover::before {
border: 3px solid #ceb849;
}
.textlink08 a:hover::after {
border-color: #ceb849 #ceb849 transparent transparent;
}矢印と丸の組み合わせです。シンプルながらよく使用する機会の多いスタイルなので覚えておくと便利です。こちらも矢印をtransform: rotate(45deg)で回転させているため縦位置がずれてしまいます。サイズに合わせてtop: calc(50% - 3px)の3pxを変更して位置を調整してください。
