【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】WordPress5.0の編集エディターを旧バージョンに戻す方法

WordPressのバージョンが、これまでの4.0の系統から5.0系統の最新版へのリリースとなりました。 安全性やバグの修正はもちろんですが、今回、5.0系統の最新リリースで大きく変わったのが投稿時の編集エディターとして「Gutenberg」が標準採用されたことだと思います...続きを読む

2019.02.13WordPress

Hair Lounge Credo様WEBサイト制作

伊豆市小立野にリニューアルオープンした美容室Hair Lounge Credo(ヘアラウンジクレド)様のWEBサイトを制作いたしました。店舗のリニューアルあるに合わせてWEBサイトもリニューアル!店舗の空間デザインに合わせて、ウッドやレンガ調、蔦などのイメージをWEBサイ...続きを読む

2016.07.06WEBサイト制作美容室

【WP】管理画面で操作をしていたらForbiddenが表示された

さくらインターネットのレンタルサーバで、WordPressを用いてWEBサイト(ホームページ)やブログを開設し、WordPressの管理画面を操作中に「Forbidden」が表示されたことありませんか? Forbidden The server refuse to...続きを読む

2018.08.02WordPressさくらインターネットレンタルサーバ

美容室ヒュッゲ様WEBサイト制作

静岡県富士市にある『美容室ヒュッゲ』様のWEBサイトを制作いたしました。お店のナチュラルな雰囲気と、手書きのかわいらしいロゴに合わせて、水彩調のイラストやレースなどを用いてかわいらしいデザインをしました。ヘアギャラリーやスタッフブログなどCMSによる更新コンテンツも充実したホ...続きを読む

2019.06.14WEBサイト制作美容室

【デザイン】ライセンスフリーのグラフィカルユーザインタフェーステンプレート

WEBサイトやパソコンの画面などに見られるメニューやボタンなどのグラフィカルユーザインタフェース(GUI)のテンプレートをまとめてみました。 Flat Style & iOS 7 Line Style UI Kit PSD フラットデザイン、iOS 7 イメー...続きを読む

2015.02.14インスピレーション