欢迎来到豆沙资源网,请记住本站地址:www.xsdy168.com 以备不时之需

好看的网页按钮配色css代码

搜点资源网 2020-3-26 综合资源 3

点击下面图片可放大


好看的网页按钮配色css代码.png



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {margin: 0px; padding: 0px; font-size: 14px; font-family: '微软雅黑';}
a {color: #fff; text-decoration: none;}
.btn1 {background:#f63; display: inline-block; padding: 8px 13px; margin: 20px; border-radius: 5px;}
.btn1:hover {background: #f73e00;}
.btn2 {background:#e33; display: inline-block; padding: 8px 13px; margin: 20px; border-radius: 5px;}
.btn2:hover {background: #F71111;}
.btn3 {background:#0ae; display: inline-block; padding: 8px 13px; margin: 20px; border-radius: 5px;}
.btn3:hover {background: #02A2E2;}
.btn4 {background:#2c7; display: inline-block; padding: 8px 13px; margin: 20px; border-radius: 5px;}
.btn4:hover {background:#25C173;}
.btn5 {background:#009688; display: inline-block; padding: 8px 13px; margin: 20px; border-radius: 5px;}
.btn5:hover {background:#018175;}
.btn6 {background:#024A67; display: inline-block; padding: 8px 13px; margin: 20px; border-radius: 5px;}
.btn6:hover {background:#00384E;}
.btn11 {border:1px solid #f63; color:#333; display: inline-block; padding: 8px 13px; margin: 20px; border-radius: 5px;}
.btn11:hover {background: #f63; color:#fff;}
.btn22 {border: 1px solid #e33; color:#333; display: inline-block; padding: 8px 13px; margin: 20px; border-radius: 5px;}
.btn22:hover {background: #e33; color: #fff;}
.btn33 {border:1px solid #0ae; color: #333; display: inline-block; padding: 8px 13px; margin: 20px; border-radius: 5px;}
.btn33:hover {background: #0ae; color: #fff;}
.btn44 {border:1px solid #2c7; color:#333; display: inline-block; padding: 8px 13px; margin: 20px; border-radius: 5px;}
.btn44:hover {background:#2c7; color: #fff;}
.btn55 {border:1px solid #009688; color:#333; display: inline-block; padding: 8px 13px; margin: 20px; border-radius: 5px;}
.btn55:hover {background:#009688; color: #fff;}
.btn66 {border:1px solid #024A67; color:#333; display: inline-block; padding: 8px 13px; margin: 20px; border-radius: 5px;}
.btn66:hover {background:#024A67; color: #fff;}
</style>
</head>
<body>
	<a href="" class="btn1">登录注册</a>
	<a href="" class="btn2">登录注册</a>
	<a href="" class="btn3">登录注册</a>
	<a href="" class="btn4">登录注册</a>
	<a href="" class="btn5">登录注册</a>
	<a href="" class="btn6">登录注册</a>
	<a href="" class="btn11">登录注册</a>
	<a href="" class="btn22">登录注册</a>
	<a href="" class="btn33">登录注册</a>
	<a href="" class="btn44">登录注册</a>
	<a href="" class="btn55">登录注册</a>
	<a href="" class="btn66">登录注册</a>
</body>
</html>



本文标签: 网页代码
  特别声明:文章多为网络转载,资源使用一般不提供帮助,特殊原创资源除外,如有侵权,不实,不妥请联系删除!

上一篇:没有了,请查看其它分类
下一篇:一段温馨提示访客的JS代码

发表留言:

同类推荐

  • 一组非常简约好看的CSS3汉堡包菜单图标按钮变形动画特效,汉堡包菜单图标在手机端APP或响应式设计上比较常见,一般用来展开和关闭网站导航菜单......