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

よく読まれている記事

TensorFlow Lite Model Makerでカスタムモデルを作成する

LaravelとBackpackで構築した管理画面をカスタマイズする

【CSS】コンテンツ量が少ない時だけフッターを下部に固定する方法

LaravelとBackpackで管理画面を爆速で構築する

アクセス数バク上がり!MARBLEのアクセス数増加方法を大公開!

Flutter SDKのバージョンをプロジェクト別に指定する

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

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

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

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

関連記事

【CSS】コンテンツ量が少ない時だけフッターを下部に固定する方法

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

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