用css制作的一组立体感很强的按钮样式

最新推荐文章于 2025-06-09 09:04:13 发布

原创最新推荐文章于 2025-06-09 09:04:13 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #button #border #url #input #class

Css 专栏收录该内容

1 篇文章

订阅专栏

用css制作的一组立体感很强的按钮样式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>立体感按钮样式</title> <mce:style></mce:style><style mce_bogus="1">.submit1 { background:url(/uploadfile/200807/11/6F134150910.gif) 0px -13px; border:1px solid #cfab25; padding-top:2px; cursor:pointer;} .submit2 { background:url(/uploadfile/200807/11/6F134150910.gif) 0px -69px; border:1px solid #8b9c56; padding-top:2px; cursor:pointer;} .submit3 { background:url(/uploadfile/200807/11/6F134150910.gif) 0px -8px; border:1px solid #cfab25; height:32px; font-weight:bold; padding-top:2px; cursor:pointer; font-size:14px; color:#660000;} .submit4 { background:url(/uploadfile/200807/11/6F134150910.gif) 0px -64px; border:1px solid #8b9c56; height:32px; font-weight:bold; padding-top:2px; cursor:pointer; font-size:14px; color:#336600;} .submit5 { background:url(/uploadfile/200807/14/1513200969.gif) 0px -5px; border:1px solid #7AADC8; padding-top:2px; cursor:pointer;} .submit6 { background:url(/uploadfile/200807/14/1513200969.gif) 0px 0px; border:1px solid #7AADC8; height:32px; font-size:14px; font-weight:bold; padding-top:2px; cursor:pointer;}</style> </head> <body> <p> <input name="button" type="button" class="submit1" id="button" value=" 提交 " /> <input name="button2" type="button" class="submit2" id="button2" value=" 提交 " /> <input name="button5" type="button" class="submit5" id="button5" value=" 提交 " /> </p> <p> <input name="button3" type="button" class="submit3" id="button3" value=" 提交 " /> <input name="button4" type="button" class="submit4" id="button4" value=" 提交 " /> <input name="button6" type="button" class="submit6" id="button6" value=" 提交 " /> </p> </body> </html>