网站制作如何给自己的网站添加漂亮按钮样式代码

网站制作

网站制作如何给自己的网站添加漂亮按钮样式代码

网站制作时,总会用到按钮,用户登陆、注册(enroll)等等都离不开按钮的使用,网站设计如何用CSS代码(code)实现漂亮的按钮。

网站制作

网站CSS代码(code)如下:

<style> .btn { BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd 1px solid;PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: GOOGLE PRogid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde); BORDER-LEFT: #7b9ebd 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7b9ebd 1px solid } .btn1_mouSEO(搜索引擎优化)ut { BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#B3D997); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid } .btn1_mouseover { BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#CAE4B6); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid } .btn2 {padding: 2 4 0 4;font-size:12px;height:23;background-color:#ece9d8;border-width:1;} .btn3_mouseOUT(出局) { BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid } .btn3_mouseover { BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#D7E7FA); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid } .btn3_mousedown { BORDER-RIGHT: #FFE400 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #FFE400 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #FFE400 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #FFE400 1px solid } .btn3_mouseup { BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid } .btn_2k3 { BORDER-RIGHT: #002D96 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #002D96 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#FFFFFF, EndColorStr=#9DBCEA); BORDER-LEFT: #002D96 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #002D96 1px solid } </style>

提示:您可以先修改部分代码(code)再运行

HTML代码如下:

<body> <P><a href=””><button class=btn TITLE(标题)=”好看的按钮”>好看的按钮</button></a></p> <a href=””><button class=btn1_mouSEO(搜索引擎优化)UT(出局) onmouseover=”this.className=’btn1_mouseover'” onmouseout=”this.className=’btn1_mouseout'” TITLE(标题)=”好看的按钮”>好看的按钮</button></a> &nbsp; <P> <a href=””><button class=btn2 TITLE(标题)=”好看的按钮”>好看的按钮</button></a> <P> <a href=””><button class=btn3_mouseout onmouseover=”this.className=’btn3_mouseover'” onmouseout=”this.className=’btn3_mouseout'” onmousedown=”this.className=’btn3_mousedown'” onmouseup=”this.className=’btn3_mouseup'” TITLE(标题)=”好看的按钮”>好看的按钮</button></a> </body>

提示:您可以先修改部分代码(code)再运行。好,有关《网站制作如何给自己的网站添加漂亮按钮样式代码》张国维seo分享到这!

作者:张国维博客

张国维博客网站-仅提供分享专业的seo优化,网站建设,网络推广,编程开发,信息安全等有干货的互联网资讯!

发表评论

张国维seo博客是一个免费为大家提供网络营销教程seo教程网络安全新媒体营销微信营销seo工具互联网资讯网站!

维维一笑网 Copyright ©2015-2024 All Rights Reserved  粤ICP备20063688号    粤公网安备 44152102000036号  网站地图