【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;
}

関連記事

HTML5 + CSS3 レスポンシブサイト テンプレート『Minimaxing』

スマートフォンが普及して、WEBサイトをスマートフォンで閲覧することも多くなっています。従来のWEBサイトをスマートフォンに対応したいと検討される方もいらっしゃると思います。 今回、ご紹介するのはパソコン、タブレット、スマートフォンに対応したレスポンシブ型のWEBサイト...続きを読む

2015.02.06CSSHTMLコーディング

【WP】ソーシャルブックマークのボタンを追加するプラグイン

WordPressで構築したサイトやブログの記事にソーシャルブックマーク(またはソーシャルメディア)のボタンを追加することができるプラグインをまとめてみました。 ほとんどのプラグインが管理画面のプラグインの検索より探すことができます。 Sharebar 投稿した...続きを読む

2015.02.20WordPress

【WP】WordPressテーマファイルのページ階層早見表

WordPressでサイト構築するために必須となるテーマ。初めてWordPressのテーマのファイルをみるとそれぞれのファイルがどのように関連してサイトが構築されているのか難しく感じるかもしれません。 テーマをカスタマイズしたいとき、テーマを利用したいとき、テーマをより深く...続きを読む

2016.07.03WordPress

【デザイン】バレンタインカードにぴったりなデザインワークスまとめ

今日は、バレンタインにちなんだカードのデザインワークスをまとめみました。ツールのキットやハウツーが掲載されており実際にカードを作るときの参考にもなります。 Hearts a Flutter ツールキットを組み合わせて制作されたカードです。ハートやリボンの組み合わせがか...続きを読む

2015.02.15インスピレーション

静岡洋館巡り「旧エンバーソン住宅」フォトギャラリー

静岡市の市指定有形文化財「旧エンバーソン住宅」を見てきました。明治時代の西洋建築の装飾などその雰囲気にふれることができました。 概要(引用) 旧エンバーソン住宅は、カナダからキリスト教伝道のため日本に派遣されたロバートエンバーソン師の自邸として、明治37年(190...続きを読む

2015.03.18フォトギャラリー