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

関連記事

公式サイトをリニューアルオープンいたしました

デザインスタジオ・エフの公式WEBサイトをより見やすく、より探しやすくを目指してリニューアルをしました。 制作事例やブログ、私たちのサービスについてご案内いたします。 今後とも引き続きご愛顧のほど、よろしくお願い申し上げます。 ...続きを読む

2015.02.06

【フォト】藤枝花火大会《蓮華寺池公園》

毎年8月7日に藤枝市の蓮華寺池公園で開催される花火大会。 藤枝花火大会は、大正時代から続く静岡県藤枝市の歴史ある花火大会です。蓮華寺池公園の山々をバックに約5000発が打上がります。蓮華寺池公園周辺で花火を見ることが多いのですが、写真を撮ったのは、山側から花火を見下ろすように撮影...続きを読む

2016.08.07フォトギャラリー藤枝

【JavaScript】横にスライドするレスポンシブメニューを実装するライブラリ『mmenu』

スマートフォンやタブレットのアプリなどでボタンを押すとメニューが横から展開するインターフェイスをみることがあります。今回はそのような横にスライドするメニューを実装することができるJavaScriptライブラリ『mmenu』を紹介します。 『mmenu』 ダウン...続きを読む

2015.03.04HTMLコーディング

美容室グランディール様WEBサイト制作

富士宮市にある『美容室グランディール』様のWEBサイトを制作いたしました。グランディール様の店内のイメージであるナチュラルで癒される空間をWEBサイト上でも感じていただけるようにデザインをいたしました。 [gallery link="file" columns="4...続きを読む

2015.02.14WEBサイト制作美容室

美容室グランディール様紹介カード制作

富士宮市にある『美容室グランディール』様の紹介カードを制作いたしました。お店を紹介するショップカードとしての機能と、お客様が親族・ご友人の方などに紹介いただける紹介カードの2つの機能があるカードです。光沢をつけて高級感のあるデザインにいたしました。 クライア...続きを読む

2015.02.18名刺・カード制作美容室