富山のシステム開発・Web制作会社

簡単に高級感のあるボタンをCSSのみで作ってみる

今回作成するボタンの構成

ソースコードを説明する前に、イメージを把握していただいたほうが、分かりやすいと思ったので、図を作成しました。 ボタンの背景を大きくして、ボタンにマウスがのった時に、背景をスライドさせて、イメージを変更します。
背景はバックグラウンドなので、どれだけ広げてもボタンからはみ出した箇所は表示されません。

ソースコードの解説

では、ソースコードを見ていきましょう。

See the Pen LYVggqN by Nakada Shinichi (@nakada-shinichi) on CodePen.

今回のポイントはlinear-gradientをつかいボタンの背景をグラデーションを設定している箇所です。
linear-gradientはグラデーションを指定することが出来ます
引数は、linear-gradient(グラデーションの角度,グラデーションの色)です。
そしてサイズも縦横300%にして巨大にしています。
さいごは、positionを一番左端にしています。
グラデーションの色の設定を見ていただきたいのですが、左端の設定をアルファー0にしてあるので透明になっています。
透明な箇所がpositionで指定されているので、はじめは何も指定されていないように見えるのです。

あとは、ボタンにマウスがのった時にpositionの位置をbackground-position: 99% 50%;と変えてやればかっこいい効果をつけることが出来ます。


簡単に、インパクトのある効果をつけることが出来るので、ぜひ試してみてください!

この記事を書いた人
中田 慎一
Creative Designer

よく読まれている記事

CSSのanimationとkeyframeで画像をふわっと切り替える方法

サブスクと定額制の違い説明できますか!?

今回の事態を非常に重く受け止めております

3月31日は奇跡の「トリプル開運日」!こんなぶち上がる最強日に何をするべきか!

簡単に高級感のあるボタンをCSSのみで作ってみる

関連記事

CSSのanimationとkeyframeで画像をふわっと切り替える方法

サブスクと定額制の違い説明できますか!?

今回の事態を非常に重く受け止めております