CSS / CSS3 と LESS を使って iPhone っぽいボタンを作る方法を 紹介します.

LESS の機能をフル活用しつつ CSS3 をふんだんに散りばめてみました. いつも通りすべて jsdo.it で作成しているので簡単に実行, 確認, fork して修正なんてことができます.

Step by Step で学べるように細かく分けたので, 実際に作りながら読んで頂けると幸いです.

table of contents

• サンプル
• Step 00 まずは基本となるマークアップとスタイルを!
• Step 01 要素をボタンスタイル化する mixins を定義しよう
• Step 02 空だと意味が無い! 引数のパラメータを適応させよう
• Step 03 見た目をゴージャスに! 光沢を出そう
• Step 04 ブラッシュアップ! hover や action 時の変化

サンプル

サンプルです. マウスを乗せると影が強調され, クリックするとヘコむのが わかると思います.

up

Step 00 まずは基本となるマークアップとスタイルを!

まずは, ベースとなるマークアップとスタイルを書きましょう!

Read More jsdo.it

up

Step 01 要素をボタンスタイル化する mixins を定義しよう

次に, ボタンスタイルを簡単に適応できるように mixins を定義します. ここではまだ mixins は空なので見た目は変わりません.

Read More jsdo.it

up

Step 02 空だと意味が無い! 引数のパラメータを適応させよう

やっと見た目が変わります! mixins に渡した値をプロパティに適応させていきます.

Read More jsdo.it

up

Step 03 見た目をゴージャスに! 光沢を出そう

ここで一気に iPhone のボタンっぽくなります. 光沢を出すためのフィルターを mixins で作成し, ボタンに適応させていきます.

Read More jsdo.it

up

Step 04 ブラッシュアップ! hover や action 時の変化

最後のブラッシュアップです! ホバー時の演出やクリック時のくぼみを表現します.

Read More jsdo.it

up