【SASS】CSS3で作る簡単グラデーション+画像ボタン(Compass活用)

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版も用意してくれるので、とても便利です。

Ultimate CSS Gradient Generator – ColorZilla.com

コメント

タイトルとURLをコピーしました