CSS3から、グラデーションや角丸を使ったボタンを、画像を使用せず作れるようになりました。
画面幅が変動するレスポンシブサイト、スマートフォンやタブレット対応などの際は、特に画像を使わないボタンが大活躍します。
今回は、可変に対応した、テキスト対応ボタンの設定をメモしておきます。
まず、今回はSASSとCompassを使用する事前提でメモしておきます。
a.btnStyle01 { position:relative; display:block; padding:8px 10px 6px 20px; @include border-radius(2px); // Compassの角丸設定 border:1px solid #c9c9c9; @include background-image(linear-gradient(top, #ffffff 0%,#ffffff 47%,#ffffff 48%,#fcfcfc 50%,#f1f1f1 52%,#f4f4f4 100%)); // Compassのグラーデーション設定 // テキスト前にアイコン画像をつける設定 &:after { position:absolute; top:5px; left:5px; width:13px; height:33px; content:""; background:url(images/icon-tit01.gif) no-repeat 0 0; background-size:50%; } }
グラーデーションは、グラデーションジェネレーターを使用すると、簡単に作成することができます。
以下のジェネレーターは、作成したソースのsass版も用意してくれるので、とても便利です。
コメント