2022.09.01
スキルを上げたきゃ数をこなせ！1ヶ月毎日ロゴを作った話
デザイン
制作
2022.01.20
フォームの送信ボタンやリンク用など、サイト内で使えるシンプルなボタンのアイデアをまとめてみました。
CSSだけでできる動きのアイデアも入れているので、ぜひご活用ください！
目次
一番シンプルな枠線が付いただけのボタン。transitionを指定することでふわっと切り替わるボタンにすることもできます。
先ほどのボタンと同じデザインでも、ホバー時に色が反転すると選択しているボタンがわかりやすくなります。
シャドウをつけると少し立体的なボタンにすることができます。
border-radiusを指定することで角丸のボタンにすることができます。
角丸ボタンにするとき、下記の注意点があります。
backgroundやborderなどの指定と同じタグにborder-radiusの指定をしないとうまく角丸にならない。aタグやbuttonタグなど、ボタンになる要素の外側のタグに指定してしまうと角丸の外側も押せる状態になってしまうこともある。
株式会社スピカデザイン
質問・感想などはこちら！
REQUEST
ご意見、感想や記事のリクエストなど
メッセージお待ちしております！
https://spiqa.design/
spiqa_design