【アローラルスタッフブログ】

評判、人気のおすすめ観光スポットはどこ?美味しい河内長野のグルメ情報を比較!アローラホームのご紹介も。

一度廃れたグラデーションデザインのリンクボタンを作ってみた!

こんにちは。
システム課の淺野です。

先日の休日にとうとうスマホ機種変しました!

一度廃れたグラデーションデザインのリンクボタンを作ってみた!

Galaxy S20+は幅が大きくて指が届かないだろうとGalaxy S20にしました。
残念ながら5Gはまだ梅田ぐらいで5Gのスピードを体験できていません。
そして落として割れてはいけないとガラスのカバーを購入、家に帰るとシリコンのカバー入ってる!
言ってくださいよー!まあ、ガラスの方が丈夫だからいいか。
さらに、スマホが122,980円なのに合計166,760円??
書類をよく見たらワイヤレスの充電&自動バックアップのアクセサリーでした。
置くだけで充電とバックアップが出来るものです。
これが43,780円。
価格気にせずに買って思っていたより高くついてしまいました。。。

さて、ホームページを少しでも良くしようと取り組んでいます。
今日はリンクボタンのデザインを変更してみました。

変更前はこんな感じです。
一度廃れたグラデーションデザインのリンクボタンを作ってみた!

全体はミニマルデザインで 装飾や凝った形状を排除したデザインです。
ここに重要なボタンで色を付けたフラットデザインのリンクボタンにしていたのです。
モデルハウス見学予約、アローラタウン見学予約、ショールーム見学予約の3つのボタンです。

これを鮮やかなグラデーションのリンクボタンにしてみました。
一度廃れたグラデーションデザインのリンクボタンを作ってみた!
ドロップシャドウも入ってます。

スマホで見るといい感じです。
一度廃れたグラデーションデザインのリンクボタンを作ってみた!

以前のはこちら。
一度廃れたグラデーションデザインのリンクボタンを作ってみた!
押しやすいですけど惹かれませんよね。

このグラデーション、流行っていた時代もあったのですがだんだんださいと言われて廃れたのです。
そしてフラットデザインが流行り、それからまたグラデーションが流行ってきたのです。
でも以前のグラデーションと違って美しい配色で様々な所で使われています。
ボタンや文字であったり、画像であったり。
インスタグラムのアイコンがフラットデザインだったのが美しいグラデーションに変わりました。
インスタグラムのアイコン
FireFoxやAdobeなんかも変わっています。
フラットデザインとグラデーションデザインを複合させたのとかもありますね。

そしてこのグラデーションとドロップシャドウのボタンは画像ではなくてCSS(スタイルシート)で出来るのです。

スタイルシートを参考にしたのがこちらのサイト。
CSSのグラデーション(linear-gradient)の使い方を総まとめ!

透明感のある美しいグラデーションを参考にしたのがこちら。
WebGradients

CSSだけで出来るとテキストをコピペするだけなので速いです。
画像だと画像を作成してアップロードしてとちまちましないといけません。

デザインも変化Webも変化なのです。
 

投稿者プロフィール

淺野
淺野
河内長野で勤めてついに11年目に突入。社内のITインフラ、社内システム(FileMaker)、各SNS、Webサイトアローラル三共住販株式会社と大阪府河内長野市の地域情報ポータルサイト河内長野おでかけ情報の面倒をみています。
 河内長野をPRすることで河内長野に住みたい!と思って頂いてアローラホームを建ててもらえたら本望です(^-^) 
たまにランチに行ってブログに投稿しているが評価が甘くなりがちかも。河内長野でランチは酒造通りの三佳屋のランチとか洋食のおとぎ屋のランチが好きです。