ワクワクして働くための生産性↗向上Hacks

中小企業や個人事業で頑張る人が楽して他人の3倍成果を上げるために役立ちそうな情報を紹介しています。

今流行りのグラデーションボタン238種とコピペでできる設置方法

f:id:ganapati55:20170601164650j:plain

どうも。

ganapatiです。

f:id:ganapati55:20170526154821j:plain

最近Webサイトでグラデーションが使われているのを見かけることが多くなってきました。

facebookなんかが有名ですね。

一昔前にもグラデーションが流行った時期もありましたが、それとは全く別物といってよいクオリティの高さが人気の要因なのかなと思います。

さて、そんなグラデーションデザインをボタンに生かす方法をご紹介します。

今日ご紹介するグラデーションボタンはカーソルonできらりとメタリックな輝きを見せます。いい感じです。

グラデーションボタンの設置方法

まずは以下のサイトを見てください。グラデーションボタンがずらり並んでいます。

※なお、このサイトにはほかにも役立つカラーパレットなどがあります。

gradientbuttons.colorion.co

このサイトから単純にコピペで設置できれば良いのですが、実際によく見てみるとそんなコードにはなっていません。

具体的にどのような手順が必要かご紹介します。

ザクっとした参考資料

※ザクっとした参考資料を掲載します。 最終的には最後に紹介するグラデーションボタンの見本のコードを参考にしてください。

f:id:ganapati55:20170601164833j:plain

① グラデーションを選択する

まずは上記サイトより使いたいグラデーションデザインを選択します。

このとき、複数のデザインを使いたいのか、一つだけ使うのかでこの後の操作が少し変わります。

② CSSコードをコピぺする

サイトからコピぺ

上記サイトから使用したいデザインのCSSをコピーします。

f:id:ganapati55:20170601164906j:plain

取りあえずテキストエディタを開いてペーストしておきましょう。

CSSを必要に応じて編集

複数のデザインを使いたいときはコピペしたコードのclass指定に数字を追加であてるなどしてください。

一つだけの時は不要です。

③ HTMLを設置する

ボタンの設置個所にHTMLコードを貼りつけます。コードは最後の見本を参考にしてください。取りあえずリンクするURL、ボタンのテキストの編集は必須ですね。

また、複数のボタンを使用する際、CSSに合わせてclass指定の編集を忘れないようにしましょう。

④ サイトに合わせてCSSで微調整

最後にボタンの高さ、幅などを最後に調整します。どのあたりをいじったらよいかわからないという人は見本に注書きしてあるので参考にしてください。

グラデーションボタンの見本

見本を以下貼り付けておきます。初心者向けに注意書き入りです。

See the Pen グラデーションボタン by ganapati55 (@ganapati55) on CodePen.