ホームページ > 記事 > ウェブフロントエンド > Crystal button_html/css_WEB-ITnose
Crystal button_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:46:491302ブラウズ
前回の記事では、クリスタルボタンの実装について紹介しましたが、この記事では、すべてのエフェクトの実装に CSS を使用します。この記事を読んだ後は、誰もが CSS の威力に驚かれると思います。早速、その効果を見てみましょう:
上の写真の上部 3 つは、ボタンの効果です。以下の2つは2つのaタグであり、対応するスタイルをcssで変更することで上記の効果を学びましょう。
1. ボタン設定:
インターフェイスに 3 つの入力ボタンを追加します:
<input type="submit" value="提交"/> <input type="button" value="上交"/> <input type="reset" value="重置">
CSS コード:
input{ width: 100px; height: 40px; border: none; background-image: url(button/btn.png);} この効果の問題は、背景が固定されており、変更できないことです。コンテンツが増えると変更されます。 。
2. タグの効果の表示:
a タグ:
<a href="#"><span>按钮</span></a>
css コード:
a{ text-decoration: none; padding-left: 15px; display: inline-table; width: 100px; height: 40px; line-height: 40px; background: url(button/btn_bg.png);} a:HOVER{ background-position: 0 -80px;} a span{ display: inline-table; height: 40px; padding-right: 15px; color: #fff; background: url(button/btn_bg.png) right -40px;} a:HOVER span{ background-position: right -120px;} 3. css3 の新しい角丸設定属性は、上記の効果を実現します:
a タグ:
<a href="#" class="button" >按钮</a>
CSS の新しい角丸属性:
.button{ display: inline-table; height: 40px; color: #fff; padding: 0 15px; background: url(button/css3_btn_bg.png); text-align: center; border: 1px solid #3c8134; border-radius: 5px} .button:HOVER { background-position: 0 -40px;} IV 最後に、メニュー効果の例でこの記事を終わります:
レンダリング:
インターフェイス コード:
りー
css code :
<body> <ul> <li><a href="#" class="ac"><span>首页</span></a></li> <li><a href="#"><span>最新产品</span></a></li> <li><a href="#"><span>内部新闻</span></a></li> <li><a href="#"><span>联系我们</span></a></li> </ul></body>
さて、これでクリスタルボタンの実装の共有が完了しました。コード内の CSS コードは最も基本的なものであると思います。何か良いアイデアがありましたら、メッセージを残して共有してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。