当サイトはエックスサーバーを利用しています お得な友達紹介特典を見る

テキストリンクをオシャレに装飾(ボタン風&矢印スタイル)CSSコピペOK

アイキャッチ/テキストリンク テーマ共通
テーマ共通
記事内に広告が含まれています
スポンサーリンク

この記事では、CSSを使ってテキストリンクを装飾する方法をご紹介します。

ワードプレスにはテーマ独自にボタンを作る機能がありますが、あくまで普通のテキストリンクの装飾です。

この2スタイル

\汎用性の高いボタン風/
\オシャレな矢印風/

MORE

スポンサーリンク
この記事を書いた人
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • JavaScriptを勉強中
  • ドメインパワー38
  • 有料記事、累計190件購入いただいています
はっちゃん
です
プロフィール

テキストリンクで作るボタンCSS

それでは以下に2つのスタイル(ボタン風、矢印風)のHTMLとCSSを掲載しますのでご利用ください。CSSの分かる方は色や形を変えたりデザインの変更は自由におこなってくださいね。

See the Pen link-btn by はっちゃん (@hacchan) on CodePen.

ふつーのボタンは汎用性バツグン。ブロックエディタが使えないウィジェット等でも活躍します。マウスオーバー時にカラー反転するようにしています。

クラス名link-btn
<p class="link-btn"><a href="リンク先URL">BUTTON</a></p>
/*ボタン風*/
.link-btn a{
	--link-btn-color:#757575; /*ボタンの色はここで設定*/
	display:block; /*ブロック要素*/
	margin:auto; /*ボタン中央寄せ*/
	width: 300px; /*ボタンの幅*/
	border:1px solid var(--link-btn-color); /*枠線の太さ・種類・色*/
	background:var(--link-btn-color); /*ボタンの色*/
	padding: 0.5em 2em; /*ボタンの高さ*/
	color:#fff; /*文字の色*/
	border-radius:1px; /*角の丸み*/
	text-decoration: none; /*リンクの下線を消す*/
	text-align: center; /*文字中央寄せ*/
	transition: all .3s; /*なめらかな動きに*/
}

/*マウスオーバー時に反転させる*/
.link-btn a:hover{
	background:initial;
	color:var(--link-btn-color);
}

矢印風

See the Pen more-btn by はっちゃん (@hacchan) on CodePen.

この矢印、シンプルで可愛くありませんか??オシャレなサイトでよく使われているイメージがあり個人的にお気に入りです。マウスオーバー時に矢印が少し右に動くようにしています。

クラス名more-btn
<p class="more-btn"><a href="リンク先URL">MORE</a></p>
/* 矢印風----------------------------------------------*/
.more-btn {
	--more-btn-color:#333;/*矢印と文字の色はここで設定*/
	text-align: center;/*ボタン中央寄せ(右寄せにしたいときはrightに変更)*/
}

.more-btn a {
	position: relative; /*位置(ここを基準に)*/
	padding: 0 3em 0 .5em; /*内側余白調整(上右下左)*/
	color: var(--more-btn-color);  /*リンク文字色*/
	text-decoration: none; /*リンク下線を消す*/
	outline: none; /*枠線を消す*/
}

.more-btn a::before,
.more-btn a::after{
	content: ''; /*矢印部分作成*/
	position: absolute; /*位置(下線と矢印を配置する)*/
	background: var(--more-btn-color); /*矢印の色*/
	height: 1px; /*線の太さ*/
	transition: all .3s; /*なめらかな動き*/
}

.more-btn a::before {
	bottom: -10px; /*下線の下からの距離*/
	left: 0%; /*左からの距離*/
	width: 90%; /*ボタンの幅*/
}

.more-btn a::after {
	bottom: -5px; /*矢印の下からの距離*/
	right: 10%; /*右からの距離*/
	width: 15px; /*矢印部分の幅*/
	transform: rotate(35deg); /*角度調整*/
}

/*マウスオーバー時の動き*/
.more-btn a:hover::before{
	left: 10%;
}

.more-btn a:hover::after {
	right:0%;
}
スポンサーリンク

テキストリンクでボタンを設置する手順

  1. CSSをコピペする
  2. HTMLでテキストリンクを作成する
  3. HTML(ブロック)にクラスを追加する
  4. 完成
スポンサーリンク

CSSをコピペする/テキストリンク装飾用

テキストリンクの装飾スタイルを書いておく部分です。通常は子テーマのスタイルシートにCSSをコピーします。

\Cocoonの方はこちらをご覧ください/
スポンサーリンク

HTMLでテキストリンクを作成 + クラスを追加する

次に、 HTMLでテキストリンクを作成し、クラスを追加する工程です。

HTMLでリンクを作る方法は2通りあり、どちらでもOKです。

  1. ブロックエディタを使う 簡単
  2. 「カスタムHTML」にHTMLコードを直接入力する

①ブロックエディタを使う 簡単

HTMLの仕組み

例えば、ブロック(テキストリンク)を選択した状態で追加CSSクラスに「link-btn」と入力すると、自動的にクラスが追加されたHTMLが生成されます。

<p>タグの中に class=”link-btn”が追加されます
<p class="link-btn"><a href="リンク先URL">BUTTON</a></p>

<a>タグの中に直接クラスを追加する方法もありますが、当記事では「追加CSSクラス」を使えるようにあえて段落<p></p>を使っています。

②「カスタムHTML」にHTMLコードを直接入力

HTMLコードを直接入力してもOK。

ブロックメニューから「カスタムHTML」を選択し、下記コードを記述します。①のブロックエディタで生成されるコードとまったく同じものです。

<p class="link-btn"><a href="リンク先URL">BUTTON</a></p>
スポンサーリンク

テキストリンクをオシャレに装飾/まとめ

テキストリンクにクラス名を追加するだけなのでとにかく簡単。ただのテキストリンクよりも視覚的に魅力的なリンクを使うことで、ユーザーの注目を引きやすくなります。

この記事は以上です。

よろしければシェアお願いします
はっちゃんをフォローする
スポンサーリンク
\記事がお役に立てたら/
Profile
はっちゃん

40代、小中学生の息子の母。
当サイトで使っているワードプレステーマCocoonのデザインカスタマイズ、ブログ運営のことを主に発信しています。

PVアクセスランキング にほんブログ村
はっちゃんをフォローする

Comment コメントはこちらへ

タイトルとURLをコピーしました