HTML,CSS,PHP,ワードプレスカスタマイズ 技術情報資料

CSS ボタン

これは素敵。
参照先
 
CSS定義
ul.ex-buttons li{
	margin:0 2px;
	padding:0;
	width:100px;
	height:12px;
	display:inline-block;
	/display:inline;
	/zoom:1;
	border-style:solid;
	border-width:1px 1px 8px;
	border-color:#c0c0c0;
	background:#e0e0e0;
}
HTML
<ul class="ex-buttons">
	<li><a href="#">登録</a></li>
	<li><a href="#">キャンセル</a></li>
</ul>
使えるね?
 
参考
 

CSS ボタン2

 
LinkText

 
LinkText

 
LinkText
 
LinkText
 
これは、ブラウザに依存しちゃう?
 

マウスオンで色を変える CSS ボタン

 


 
<style tyle="css/text">
.demo1 button {  
    background: -moz-linear-gradient(top, #fff, #F1F1F1 1%, #F1F1F1 50%, #DFDFDF 99%, #ccc);  
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.01, #F1F1F1), color-stop(0.5, #F1F1F1), color-stop(0.99, #DFDFDF), to(#ccc));  
}  


.demo1 button:hover {  
    background: -moz-linear-gradient(top, #fff, #e1e1e1 1%, #e1e1e1 50%, #cfcfcf 99%, #ccc);  
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.01, #e1e1e1), color-stop(0.5, #e1e1e1), color-stop(0.99, #cfcfcf), to(#ccc));  
}  
</style>

<section class="demo1">  
<p><button>Button</button></p>  
</section> 

 
ボタンジェネレーター
色や角丸を調整してできたら、左のボックスの中のレビューしてるボタンをクリックすると、CSSを表示してくれる。それをコピペすればOKだ。
 
テキストに影を付けられるタイプ。
ボタンジェネレーター
 
参考

スポンサーリンク

関連記事

スポンサーリンク

カテゴリー