【原创】自定义按钮的一个样式效果

来源:互联网   编辑:思良  发表时间:2018-07-05  关注度:  

思良:在改版一个模板时,发现一个很漂亮的按钮样式,于是抓出来了,可以查看源代码。-------

tio桑客游

<style type="text/css">input[type="submit"], input[type="reset"]{  /*  按钮边框效果  */ border:0px; padding:5px 15px 5px 15px; cursor:pointer; font-family: 'Droid Sans'; font-size:12px; line-height:16px; text-decoration:none; text-transform:uppercase; } input[type="submit"]:hover,input[type="reset"]:hover{  /* 清除超链接的默认下划线 */ text-decoration:none; } input[type="submit"], input[type="reset"]{	color:#fff; background:#666666;}/* 按钮背景色  */ input[type="submit"]:hover,input[type="reset"]:hover{color:#fff; background:#ec145b;}/* 移动上去的颜色 */ </style>

效果鼠标移动上去就是紫红色:tio桑客游

image.pngtio桑客游

 tio桑客游

比如按钮源代码是:tio桑客游

 <input type="submit" name="Submit" value="提交" /> 
<input type="reset" name="Submit" value="重置" />

 tio桑客游

那么CSS样式:tio桑客游

 input[type="submit"], input[type="reset"]{  /*  按钮边框效果  */
border:0px;
padding:5px 15px 5px 15px;
cursor:pointer;
font-family: 'Droid Sans';
font-size:12px;
line-height:16px;
text-decoration:none;
text-transform:uppercase;
}
input[type="submit"]:hover,input[type="reset"]:hover{  /* 清除超链接的默认下划线 */
text-decoration:none;
}
input[type="submit"], input[type="reset"]{color:#fff; background:#666666;}/* 按钮背景色  */
 input[type="submit"]:hover,input[type="reset"]:hover{color:#fff; background:#ec145b;}/* 移动上去的颜色 */


tio桑客游

    桑客游所有【原创】作品,均为站长手写代码。部分模板代码、教材来源于自互联网,

    如有侵权,出示著作权证书联系站长删除(微信在下面)。如果本站资源对你有用,感谢打赏!


下一篇:纯css的防止图片撑破页面的代码(图片自动缩放)


上一篇:如何让一个行内元素(如一张图片)在div中居中


小提示:按 回车[Enter]键 返回,按 ←键 返回上一页, 按 →键 进入下一页。