富山のシステム開発・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

よく読まれている記事

メタバースとWEB3.0について

Laravel TelescopeとTelescope Toolbarで効率よくデバッグする

Safariでclamp()が効かない場合の対処法

【サンプルあり】今すぐ使える!便利な比較関数 min() max() clamp() のお話

CSS 子要素を親要素からはみ出して画面いっぱいに表示させる方法とWindowsブラウザの注意点

ディセントラライズド(decentralized)とは

メタバースとは

WEB3.0とは

LaravelとScribeで効率的にAPI仕様書を生成する

DXやメタバースなどバズワードについて思うこと

関連記事

Safariでclamp()が効かない場合の対処法

【サンプルあり】今すぐ使える!便利な比較関数 min() max() clamp() のお話

CSS 子要素を親要素からはみ出して画面いっぱいに表示させる方法とWindowsブラウザの注意点