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

関連記事

藤枝おんぱく2019「No33.蓮華寺池公園を着物でおさんぽしながら カメラマンに学ぶ着物姿の撮り方」

藤枝おんぱく2019「No33.蓮華寺池公園を着物でおさんぽしながら カメラマンに学ぶ着物姿の撮り方」のプログラムの案内人をしました。 お気に入りの着物を着て、春の蓮華寺池公園界隈を散策しながら、人物撮影のテクニックを学ぶことができる写真の講座と街歩きを合わせたプログラムを...続きを読む

2019.05.05フォトギャラリー藤枝

【WP】WordPressで出力されるHEADタグ内の内容を整理する

WordPressを利用してWebサイトを構築すると、HTMLを構成するHEADタグ内にWordPress特有の記述が見れます。このWordPress特有の記述は自動的に生成されるため、テーマファイルのソースに記述されているheadタグ内の内容を編集するだけでは変更することができ...続きを読む

2021.01.28HTMLコーディングWordPress

【JavaScript】チェックボックスとラジオボタンのデザインをカスタマイズする『iCheck』

フォームなどで使われるチェックボックスとラジオボタンのデザイン。「jQuery」と「Zepto」を使いチェックボックスとラジオボタンのデザインをカスタマイズするライブラリ『iCheck』をご紹介します。 実装イメージ 『iCheck』はいくつかのスキンデータも用意され...続きを読む

2015.02.10HTMLコーディング

【ソーシャルメディア】ソーシャルマーケティングの重要性

facebookやtwitter、Googoleプラスやyoutubeなどのソーシャルメディアをビジネスとしてマーケティングに取り込む動向が続いています。現在、ブロガーや中小企業の約75%が現在、などのTwitterやFacebook、LinkedInのようなソーシャルメディ...続きを読む

2015.02.17WEB

【フォト】鬼岩寺1月28日「厄除け火渡り」

藤枝にある鬼岩寺。弘法大師が当地の人々を苦しめていた鬼を退治した話にその名前の由来があり、鬼が鋭い爪を研いだといわれる「鬼かき岩」が残っています。 毎年1月28日には厄除け火渡りの行事が行われています。 フォトギャラリー ※写真をクリックすると拡大表示します。 [...続きを読む

2017.01.28フォトギャラリー