簡単!CSSで立体的なポチッと凹むボタンの作り方つなかんブログWEB,DTM,ガジェットとか好きなことを配信しています。定期券の人は注意!iphoneでsuicaを複数登録した際の使い方。DTM&DAWにはMacを良いと言われている理由を解説します。定期券の人は注意!iphoneでsuicaを複数登録した際の使い方。DTM&DAWにはMacを良いと言われている理由を解説します。定期券の人は注意!iphoneでsuicaを複数登録した際の使い方。再評価!一太郎2019がかなり良さそうな件。簡単!CSSで立体的なポチッと凹むボタンの作り方どうも、つなかんです。今日は簡単でかつ見た目をグッと良くする立体的なボタンの作り方を紹介したいと思います。↓こんな感じのボタンですね。購入はコチラ立体ボタンのメリットCSSで立体ボタンを作るメリットですが、圧倒的メリットは見た目(UI)の改善ではないでしょうか。人間の心理として立体的に突起している四角い物は無意識に押せるものと理解します。これはサイトやLP、アプリを作る上でユーザーの思考の妨げにならない為に非常に大切なことです。ここの改善だけでCVR(成約率)が130%以上改善する事があるくらいなんですね。サイトのデザイン次第ではあるのですが可能であれば立体ボタンをオススメします。他にも影を利用して浮かすという表現の手法もあります。フラットなデザインのサイトでしたらそちらが良いかもしれません。CSSで作るメリット画像でも立体ボタンは作れますが、CSSで作る事をオススメします。一度作ってしまえばサイト内のどこにでも流用可能だからです。LPやアプリなどでは設置する箇所が多いかと思います。画像ですとボタン毎にテキストに変更があれば都度Photoshopなどで作らなくてはいけませんからね。行った観点からCSSで作成することはサイト運用する上とてもメリットがあります。HTMLの記述では早速作って見ましょう。HTMLはシンプルです。レイアウト用のdivとボタン用のaタグを置くだけで良いです。それに分かりやすくdivのClassは”entryBtnLayout”。aタグのClassは”entryBtn”にしています。ちなみにClass名は何でもいいですよ。href="#">購入はコチラ</a></div>すると下のようになる思います。購入はコチラHTMLはこれで終了です。CSSの記述それではCSSに何をあてるのか解説していきたいと思います。aタグにCSSをあてていきましょう。コメントアウトで解説を入れていますのでそれぞれどういった意図であてているのか確認して下さい。auto;/*テキストが2段になる場合もあるので数値ではなくautoです。20px;/*ボタンの内スペースの幅です*/}上記のCSSをあてると以下のようになると思います。購入はコチラよくあるフラットなデザインのボタンですね。ここから立体ボタンにしていきしょう。上記のCSSにさらに足していきます。#005400;/*cssの影の機能を利用してボタンの側面を描いています。translateY(-6px);/*影を使って側面を描いた分、ボタンを上に移動しています*/}購入はコチラどうですか?だいぶボタンらしくなってきましたね。これだとマウスを当てた際に凹まないのでちょっとボタンらしくないですよね。次はこのボタンを凹ますためのCSSを加えたいと思います。all;/*状態変化時の動作を制御するプロパティです。translateY(-2px);/*影が減った分、下に移動させています。*/}購入はコチラマウスをあてると凹むボタンになりましたね。これでもいいんですがもうひと工夫してみましょう。ボタンにグラデーションを適用してみたいと思います。グラデーションの記述は少し面倒なのでWEBツールを使って生成するのをオススメします。Generatorです。こちらですと視覚的に確認しながらCSSのグラデーションを生成することが出来ます。https://www.colorzilla.com/gradient-editor/上記サイトで生成したコードをコピペしたのが下のコードになります。translateY(-2px);}購入はコチラグラデーションを加えるだけでたいぶ雰囲気が変わりますね。ボタンはこれで完成です。最後にボタンの設置場所に関するCSSを記述しましょう。aタグのボタンの周りを囲っていたdivの”entryBtnLayout”にCSSをあてます。translateY(-2px);}購入はコチラボタンが真ん中に移動しましたね。後は用途別にaタグのhref属性にURLを入れて下さい。以上がCSSでのボタンの作り方でした。合わせて読みたい関連記事ワードプレスのテーマ『ColorMag』で、サムネ付き最新投稿リストを...WEBデザインWEBデザイナーになって分かった未経験から最速でWEBデザイナーにな...WEB系サイトをリニューアルしました。WEBデザイン自宅でお仕事が出来る!!ランサーズに登録してみた。WEBデザイン初心者だったら尚更Photoshopを使いましょう!!WEBデザインプライバシー・ポリシーを作る方法。//ページ内リンク#非表示。定期券の人は注意!iphoneでsuicaを複数登録した際の使い方。DTM&DAWにはMacを良いと言われている理由を解説します。定期券の人は注意!iphoneでsuicaを複数登録した際の使い方。DTM&DAWにはMacを良いと言われている理由を解説します。定期券の人は注意!iphoneでsuicaを複数登録した際の使い方。再評価!一太郎2019がかなり良さそうな件。共有TweetShareHatenaPocketLine運営者PCと楽器とDTMが好きな人間つなかんと申します。仕事は主にWEBデザイナーとして活動しています。定期券の人は注意!iphoneでsuicaを複数登録した際の使い方。DTM&DAWにはMacを良いと言われている理由を解説します。定期券の人は注意!iphoneでsuicaを複数登録した際の使い方。DTM&DAWにはMacを良いと言われている理由を解説します。定期券の人は注意!iphoneでsuicaを複数登録した際の使い方。