ホームページ >ウェブフロントエンド >htmlチュートリアル >css_html/css_WEB-ITnoseで実現した立体的な背景変更効果のあるクリックボタン
css_html/css_WEB-ITnoseで実現した立体的な背景変更効果のあるクリックボタン
- WBOYオリジナル
- 2016-06-24 11:30:231666ブラウズ
CSS で実現した 3 次元の背景変更効果を持つボタンをクリックします:
一般的に、オリジナルのエコロジーなものは比較的広範囲に渡りますが、Web ページ内のボタンについても同様です。ボタンは、リンクの背景を設定するためのもので、必要な効果を実現するために、デフォルトの状態と押された状態でリンクの背景画像を設定します。
コードは次のとおりです。
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.clear{ overflow: hidden; width: 100%;}a.button{ background: transparent url('mytest/demo/bg_button_a.gif') no-repeat scroll top right; color:#444; display:block; float:left; font:normal 12px arial, sans-serif; height:24px; margin-right:6px; padding-right:18px; /* sliding doors padding */ text-decoration:none;}a.button span{ background:transparent url('mytest/demo/bg_button_span.gif') no-repeat; display:block; line-height:14px; padding:5px 0 5px 18px;}a.button:active{ background-position: bottom right; color:#000; outline:none;}a.button:active span { background-position:bottom left; padding:6px 0 4px 18px; }</style></head><body><a class="button" href="javascript:void(0);"><span>按钮</span></a></body></html>
上記のコードは比較的単純なので、ここでは紹介しません。関連する資料を参照してください。
関連資料:
1.:active、CSS での a:link、a:visited、a:hover、および a:active の使用法に関する章を参照してください。
2.Background-positionは、CSSにおけるbackground-positionの配置の詳細な説明を参照できます。
元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod=viewthread&tid=12737
詳細については、以下を参照してください: http://www.softwhy.com/divcss/
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。