読者です 読者をやめる 読者になる 読者になる

はしくれエンジニアもどきのメモ

情報・Web系技術の勉強メモ・備忘録です。

UI を意識した下矢印付きのボタン

CSS

UI を意識した下矢印付きのボタン

ボタンの padding の設定をどうすればいいか迷っていたが、エンジニアのためのUIデザイン // Speaker Deck が参考になるのでメモ。

UI を意識したボタン

参考にしたページはこちら

余白テクニック ボタン

実際に作成したものを CodePenで。

CSS3では、変数は使えないので、[em] で代用してます。

下矢印は、[>] を transition:rotate( 90deg ); で回転させています。

codepen.io