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/
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
