渐变按钮、渐变边框

来源：互联网发布：电脑怎么下载不了淘宝编辑：程序博客网时间：2024/04/30 19:37

渐变按钮、渐变边框

<!DOCMENT HTML>

<html>

<head>

<style>

.gradient-block-diagonal {

width:200px;

height:40px;

margin:50px;

box-sizing:border-box;

border:1px solid transparent;

background-clip:padding-box,border-box;

background-origin:padding-box,border-box;

background-image: -webkit-linear-gradient(90deg,#fff,#fff), -webkit-linear-gradient(90deg,#33a7d2,#004fa2);

background-image:-moz-linear-gradient(90deg,#fff,#fff),-moz-linear-gradient(90deg,#33a7d2,#004fa2);

background-image:linear-gradient(90deg,#fff,#fff),linear-gradient(90deg,#33a7d2,#004fa2);

}

/*!btn*/

.btn{

display: block;

width: 200px;

height: 40px;

line-height: 40px;

text-align: center;

color: #fff;

text-decoration: none;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

margin-left: 50px;

}

.btn_gradient{

display: block;

background:-webkit-linear-gradient(left, #d45555,#5693b7, #1da1af) ;

background:-moz-linear-gradient(left,#d45555,#5693b7, #1da1af) ;/*Mozilla*/

background:-o-linear-gradient(left,#d45555,#5693b7, #1da1af) ; /*Opera11*/

background: linear-gradient(to right,#d45555,#5693b7, #1da1af);

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#d45555, endColorstr=#1da1af);/*IE<9>*/

border: none;

-webkit-transition: all .2s;

-moz-transition: all .2s;

-ms-transition: all .2s;

-o-transition: all .2s;

transition: all .2s;;

}

.btn_gradient:hover{

opacity: .8;

}

</style>

</head>

<body>

</body>

</html>

WEB前端学习交流群21 59839993

阅读全文

0 0