【CSS】linear-gradient(グラデーション)を使ったボタン作成

CSSのlinear-gradient()関数を用いることで画像を使わずとも、グラデーション色のボタンを作成することができます。

※矢印は、「Font Awesome」、文字はGoogle Fontsの「M PLUS Rounded 1c」を組み合わせております。

ボタンのイメージ

HTMLソース

<a class="button" href="#">ボタン <i class="fas fa-chevron-right"></i></a>

linear-gradient()関数でボタンを制作する際は、hover時にlinear-gradient()関数を使用せずに、background-color のみを指定するとhover時に色は変わりません。linear-gradient()は、image要素として扱われるため、background-image: none; を指定することでhover時はimageを非表示とすることで色を表現します。

CSS

.button {
  display: inline-block;
  position: relative;
  padding: .8rem 4rem;
  color: #FFF;
  border-radius: 10rem;
  background: -webkit-gradient(45deg, #2ca9e1 35%, #007bbb);
  background: linear-gradient(45deg, #2ca9e1 35%, #007bbb);
}
.button:hover {
  color: #FFF;
  background-color: #333;
  background-image: none;
}

関連記事

【WP】プラグイン『Photospace』の利用方法

以前に紹介をした『Photospace』は、jQueryのサムネイル付のスライドショーギャラリーを実装できる「Galleriffic」を、WordPressの標準ギャラリーのショートコードに対応させることができるプラグインです。インストールと標準設定をご紹介しましたが、今回は...続きを読む

2015.06.29WordPress

【デザイン】アイディアに溢れたウェディングポートレート

ユーモア、クリエイティブ、アートさまざまなアイディアに彩られたウェディングポートレートをまとめてみました。 matt shumate Photographer 主にウェディングなどの写真を撮影されているフォトグラファーの「matt shumate」氏のポートレートより...続きを読む

2015.02.15インスピレーション

【フォト】世界で美しい星空保護区の星空

みなさんは「星空保護区」というのをご存知ですか?その名前の通り、保護すべき美しい星空が見える地域として認定しようという取り組みです。 国際ダークスカイ協会(IDA)によって世界中の暗い夜空の保護・保存を目指し、保護区を認定する活動が行われています。 UNESCO(ユネスコ)で...続きを読む

2016.07.13フォトギャラリー

【WP】ワードプレスのカスタムメニューのカスタマイズ

先日ご紹介をしたWordPressのカスタムメニューの機能。出力されるタグをみるとクラス名が多く記述されているのがわかります。記述されているクラス名を使いCSSでメニューのデザイン、表示など変更する事も可能ですが、クラス名が多すぎて煩雑になりやすいので、今回はよりカスタマイズ...続きを読む

2015.08.19WordPress

株式会社寺坂商店との業務提携のお知らせ

拝啓 時下ますますご清栄のこととお喜び申し上げます。 平素は格別のご高配を賜り、厚く御礼申し上げます。 さて、このたび当社は、株式会社寺坂商店(本社:静岡県藤枝市藤枝5-17-3、代表取締役:寺坂 祐紀)との間で、業務提携を行うことを決議いたしましたので、お知らせい...続きを読む

2022.07.22