渐变按钮、渐变边框

<!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

时间: 2024-10-11 10:36:31

渐变按钮、渐变边框的相关文章

一款纯css3实现的颜色渐变按钮

之前为大家分享了推荐10款纯css3实现的实用按钮,今天给大家带来一款纯css3实现的颜色渐变按钮.这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变,效果非常好看,一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <div class="container"> <a target="_blank" class="btn green" href="http://www.w2bc.com/&q

渐变按钮

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>渐变按钮</title> 6 <style type="text/css"> 7 .button { 8 display: inline-block; 9 position: relative; 10 ma

CSS3实现的渐变按钮,在IE7、IE6下的滤镜使用。

  .ui-button { BORDER-LEFT-WIDTH: 0px; OVERFLOW: visible; CURSOR: pointer; FONT-SIZE: 16px; HEIGHT: 40px; BORDER-RIGHT-WIDTH: 0px; VERTICAL-ALIGN: middle; BORDER-BOTTOM-WIDTH: 0px; ZOOM: 1; FONT-WEIGHT: 700; COLOR: #fff; PADDING-BOTTOM: 0px; TEXT-ALI

9种样式CSS3 渐变按钮集

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3 3D渐变按钮代码</title> <style> body { background: #e5e5e5; text-align: center; } .button { margin: 1

9种css3渐变按钮

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS3 3D渐变按钮代码</title><style>body{background: #e5e5e5;text-align: center;}.button{margin: 10px;text-dec

html5 渐变按钮练习

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>渐变按钮</title>    <link rel="stylesheet" href="style1.css" type="text/css"></head><

CSS3渐变——径向渐变

上节在<再说CSS3渐变——线性渐变>和大家一起学习了CSS3 Gradient中径向渐变最新语法(称得上是W3C的标准语法)相关知识以及其基本使用.今天我们在这一篇中主要和大家一起来了解渐变中的径向渐变新语法以及其基本使用. CSS3径向渐变 CSS3径向渐变是圆形或椭圆形渐变.颜色不再沿着一条直线轴变化,而是从一个起点朝所有方向混合.但相对线性渐变要比径向渐变复杂的多. 一.径向渐变的语法 CSS3的径向渐变已得到众多浏览器引擎的支持,只不过其语法的版本根据不同的引擎浏览器,其语法也不一样

微信小程序按钮去除边框线,分享页面

有一个需求是分享当前页面,使用美工的分享按钮图片来分享,而小程序分享功能只有button有 open-type="share"这个属性,使用image标签肯定不行.我是这样做的: <button open-type="share" style="height:85rpx;width:215rpx;padding:0;background-color:#fff;border-color:#fff;margin-right:10rpx" >

微信小程序按钮去除边框

wxml: <button class='share' id='{{item.id}}' open-type="share"> <image src='/img/fx.png' class='img_1'></image> </button> wxss: /* 按钮 */ .share{ width: 100rpx; height:50rpx; background: #fff; position:relative; margin-top