新しいサービス【AwesomeQR】

【kViewer】CSSカスタマイズを使わないでカラフルなボタンを使う方法

1 min 1,108 views
kViewerのカラフルなボタン記事のサムネイル

はじめに

kViewerのヘッダー、サイド、フッターなどにURLリンクを配置したいなと思ったことはないでしょうか?

その際に、私はめんどくさがりですが、リンクはできればボタンっぽくなってほしいなと思ったりします。

かといって、わざわざCSSカスタマイズするのも面倒だなと思ったりします。

なので、そんなときに手っ取り早くボタンっぽくするやり方を紹介します。

といいつつ、自分で忘れないようにここに残しておきます。

やり方

結論ですが、下図のように、コンテンツタイプをHTMLとして、aタグにクラスを付与するだけです。

カラフルなボタンの画像

もう少し詳細に説明します。

以下のサンプルコードのように、aタグにクラスを付与するだけで、色付きのボタンでかつホバーしたらちょっとだけ色が変化するものになります。

<a href="ここにURLを入れる" class="ui button ここに色名入れる">ボタンのテキスト</a>

上記のコードをコンテンツに入れることでカラフルなボタンが作れます!

色のバリエーションは以下のとおりです。

色名カラーcode
orangeF89B2C
green4BCD66
blue51A5CE
brownAE975F
grey767676
black27292a
pinkE77E95
violet8B7BC4
PurpleAD79C3
RedE26E3F
Teal00C8A7
OliveBCDC23
YellowFECF09

仕組みとしては、すでにトヨクモさん側で用意してあるCSSを借りているような形になります。

ですので、このスタイルシートが変更になると機能しなくなりますのでご注意ください。

さいごに

統一感のあるボタンに仕上がるので個人的には気に入っております。

気になる方はぜひお試しください。

関連記事