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

情報系技術・哲学・デザインなどの勉強メモ・備忘録です。

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

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

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

UI を意識したボタン

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

余白テクニック ボタン

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

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

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

codepen.io