元ニート中卒派遣30代ブサメン童貞のブログ

みんなが存在に疑問を感じている「元ニート、中卒、派遣、30歳超えのブサメン童貞」が実際に生息し、そして「どうやって生きてるか」を晒していくブログ

ユーザスタイルシートでデザイン改造する 〜ボタン編〜

f:id:design1983:20180726235557p:plain

Safariを使ってクラウド上で仕事をしているのですが、クラウドアプリケーションのデザインが糞すぎて我慢できません。Webインスペクタを使いながらユーザスタイルシートで専用ツールをオシャンティーでシャレオッティにするための個人的なメモ。あ、我慢できないのは糞じゃないよ。

あくまで自分用ですが、あとで自分で見て混乱しないようになるべくわかりやすい解説を心がけます。もうね、みんな小難しいこと書きすぎ。

CSSのみで作る立体的なボタン

Valid や Reset など、専用ツールにはボタンがつきもの。そして、ことごとくダサい。寝癖を「無造作ヘアです」と言い張るエンジニアのことは無視して、数年前に流行ったデザインをバランスよく取り入れるイケてるデザイナーを演出しましょう。ところで、本職は?

HTMLソースは以下を基にします。

<button>BUTTON</button>

実際の挙動

CSSの解説

コメントアウトを前方にしてみました。これでも挙動には問題ないはず。こうしたほうがわかりやすくない?数年前、何かのCSSハックで使われていた気がするので、実際に使うときはやめておいたほうがいいかも。

スマホで見てみたら逆に超絶見にくかったです……。

button {
width: 200px;
height: 70px;
background-color: #2ba098;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
letter-spacing: 0.2em;
border: none;
border-radius: 5px; /* 境界線の角丸 */
outline: none; /* 輪郭線 */
box-shadow: 0 4px 0 #0d847c; /* 影 */
}

/********** 
カーソルがボタンに乗ったとき
 **********/
button:hover {
opacity: 0.8; /* 透明度 */
}

/********** 
ボタンが押されたとき
 **********/
button:active {
transform: translateY(4px); /* Y軸方向へ移動 */
box-shadow: none; /* 影 */
}

いろいろと書いていますがポイントは1箇所。ずばりbox-shadowプロパティです。通常は下に4px伸びたbox-shadowプロパティで立体感を出しつつ、擬似クラス:activeのときにbox-shadowプロパティと同じ4pxだけ下方向へ移動させつつ影を消すことによって、押されたときに凹むような動作が。ね、簡単でしょう?

CSSのみで作るラベル風ボタン

ラベル風とも言われる付箋ボタン。このボタンはモードの変更やスキップなど非決定的な操作をするボタンに適用させよう思っています。だからサイズは少し小さめだし、押してもへこまない。辻ちゃん級にへこまない。

HTMLソースは以下を基にします。

<button>BUTTON</button>

実際の挙動

CSSの解説

button {
width: 150px;
height: 50px;
background: #FAFAFA;
color: #2ba098;
font-size: 12px;
letter-spacing: 0.2em;
border-left: solid 6px #2ba098;
outline: none; /* 輪郭線 */
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); /* 影 */
}

/********** 
カーソルがボタンに乗ったとき
 **********/
button:hover {
opacity: 0.8; /* 透明度 */
}

こっちは簡単なので説明不要。角がまくれていたりするとより付箋っぽく見えますが、面倒くさいちょっとしつこくなるので今回はNG。