2022.07.20
【第１回】Photoshopでテキストの一部の色を変える方法！＜初心者...
デザイン
制作
2022.01.20
フォームの送信ボタンやリンク用など、サイト内で使えるシンプルなボタンのアイデアをまとめてみました。
CSSだけでできる動きのアイデアも入れているので、ぜひご活用ください！
目次
一番シンプルな枠線が付いただけのボタン。transitionを指定することでふわっと切り替わるボタンにすることもできます。
先ほどのボタンと同じデザインでも、ホバー時に色が反転すると選択しているボタンがわかりやすくなります。
シャドウをつけると少し立体的なボタンにすることができます。
border-radiusを指定することで角丸のボタンにすることができます。
角丸ボタンにするとき、下記の注意点があります。
backgroundやborderなどの指定と同じタグにborder-radiusの指定をしないとうまく角丸にならない。aタグやbuttonタグなど、ボタンになる要素の外側のタグに指定してしまうと角丸の外側も押せる状態になってしまうこともある。
株式会社スピカデザイン
https://spiqa.design/
spiqa_design