真似したいセレクトボタン 6選
使いやすくおしゃれなセレクトボタンに！
お問い合わせページのフォーム画面などでよく見かけるセレクトボタンについてご紹介したいと思います。
セレクトボタンはselectタグとoptionタグを使って簡単に作成することができます。
複数の選択肢の中から選ぶような項目を作りたいときによく使われます。
簡単に使うことができますが、デバイスによってはCSSがうまく反映されないことも多いため苦戦する人も少なくありません。
今回はなるべくデバイス間で差が出ないようなCSSのデザインを作成してみました。
使ったことがない方でも、コードが少なめでわかりやすいようなもののみにしています。
一緒にセレクトボタンを作ってみましょう。
よく読まれている記事
シンプルな枠がついたセレクトボタン
グレーの枠線がついたシンプルなセレクトボタンのデザインです。
どんなWEBデザインにも馴染むような、一番よくある実装です。
マウスオーバー時に枠線が青色に変わるようになっていて、ユーザビリティにも優れています。
See the Pen
タブ切り替えアニメーション by loa (@hana4525)
on CodePen.
下線がおしゃれなセレクトボタン
ピンク色の下線がスタイリッシュなセレクトボタンのデザインです。
余計な要素をすべて消してしますことで、より今っぽく見せることができます。
マウスオーバーで選択肢の色を下線と同じ色にすることで統一感も出ます。
See the Pen
セレクトボタン by loa (@hana4525)
on CodePen.
うっすらと影がついたセレクトボタン
白色のボックスが浮かんでいるような影のあるセレクトボタンのデザインです。
背景に白以外の色があるときに使ってみたい実装です。
矢印を背景色と合わせると一体感があっておすすめです。
See the Pen
セレクトボタン by loa (@hana4525)
on CodePen.
矢印に背景色がついたセレクトボタン
選択肢と矢印の部分が分かれたようなセレクトボタンのデザインです。
よりボタンっぽいデザインにしたいときに使えそうな実装です。
ボタンの角を丸くすることで、やわらかく可愛い印象になります。
See the Pen
セレクトボタン by loa (@hana4525)
on CodePen.
角丸の枠がついたセレクトボタン
ボタンの角が丸く枠線がおしゃれなセレクトボタンのデザインです。
枠線と背景色を同じ緑色に統一することでより可愛らしいポップな印象にできます。
子供やレジャーなどの楽しい雰囲気を出したいときに使ってみたい実装です。
See the Pen
セレクトボタン by loa (@hana4525)
on CodePen.
背景色が可愛いセレクトボタン
ボタンに色を付けて矢印を丸ボタンにしたセレクトボタンのデザインです。
あまり見かけることのないデザインですが、つい押したくなる実装です。
ゲームやおもちゃなどの楽しい雰囲気になじみそうですね。
See the Pen
セレクトボタン by loa (@hana4525)
on CodePen.
よく読まれている記事
まとめ
今回はセレクトボタンについてご紹介しましたが、真似してみたいデザインはありましたか？
単調になりがちなセレクトボタンも、アレンジ次第で使いやすく・魅力的なボタンに作り変えることができます。
WEBデザイナーやコーダーであれば、必ず使うタグなので覚えておくとすごく便利です。
selectタグはアニメーションがあまり使えなかったので、今回は動きの少ない実装となってしまいました。。。
なので次回は、selestタグを使わずにプルダウンメニューを作る予定なので、こちらもぜひチャックしてみてください。
最後までご覧いただきありがとうございました☆彡