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だ。
テキストに影を付けられるタイプ。
ボタンジェネレーター
⇒参考
スポンサーリンク