【WordPress】文字装飾とボタンデザイン

hタグ以外でも文字の装飾をして記事内やサイト全体を盛り上げたいと思い、いろいろ作ってみました。

目次

アンダーライン(リンク無し)

蛍光ペンでラインを引いたようなデザインです。

YUSUKEITO.co

 
YUSUKEITO.co

 
YUSUKEITO.co

文字に枠を付ける(リンク無し)

シンプルな枠のみのデザイン。

YUSUKEITO.co

リンクボタン

上記の枠と似てますがこちらはリンクボタンです。
ホバー時に色が反転します。

YUSUKEITO.co

YUSUKEITO.co

同じくリンクボタンですが、ホバー時のアクションを逆にしてみました。
赤いボックスロゴ代表のあそこを少し意識しています。

YUSUKEITO.co

YUSUKEITO.co

ホバー時に枠が出現するリンクボタンです。

YUSUKEITO.co

ホバー時にふわっと黒くなるリンクボタンです。

YUSUKEITO.co

文字が光っているように見えるボタンです。ホバー時に光が強くなります。

YUSUKEITO.co

カッコデザインのボタンです。

YUSUKEITO.co

ホバーすると左から右へ色が変わる装飾です。リンクも貼れます。

YUSUKEITO.co

スイッチ型ボタンです。

   

Attention

サンプルのリンクボタンのリンク先は当サイトトップページです。

css/htmlの参考

下記を参考にさせていただきながらアレンジしました。
ありがとうございます。



まとめ

hタグとは別でサイトのアクセントとして使えるように作成してみました。
上手に利用してサイトのデザインレベルが上がるように頑張りたいです。

BOXデザイン
hタグカスタマイズ