漸變按鈕、漸變邊框
阿新 • • 發佈：2017-11-06
web display log margin ora round ack ctx left
<!DOCMENT HTML>
<html>
<head>
<meta charset="utf-8" />
<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>
<div class="gradient-block-diagonal"></div>
<a href="##" class="btn btn_gradient">漸變按鈕</a>
</body>
</html>
WEB前端學習交流群21 598399936
WEB前端學習交流群21 598399936
漸變按鈕、漸變邊框