html边框渐变隐藏,CSS3 按钮的渐变边框效果

CSS

语言：

CSSSCSS

确定

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css");

@import url(http://fonts.googleapis.com/css?family=Orbitron);

body {

background: #1d1d1d;

}

* {

z-index: 100;

}

.button-square {

width: 200px;

height: 80px;

overflow: hidden;

position: relative;

cursor: pointer;

margin: 15px;

border-radius: 6px;

float: left;

}

.button-circle {

width: 80px;

height: 80px;

overflow: hidden;

position: relative;

cursor: pointer;

margin: 15px;

border-radius: 100%;

float: left;

}

.button {

background: #1d1d1d;

font-family: 'Orbitron', sans-serif;

font-size: 1.2em;

text-align: center;

color: #fff;

position: absolute;

top: 3px;

left: 3px;

}

.button-square .button {

width: 194px;

line-height: 74px;

border-radius: 5px;

}

.button-circle .button {

width: 74px;

height: 74px;

border-radius: 100%;

/*=================*/

/*====GRADIENT====*/

}

.gradient,

.gradient:after {

display: block;

content: "";

width: 400px;

height: 80px;

background: #bd328f;

background: -moz-linear-gradient(-45deg, #bd328f 0%, #bd328f 18%, #2976ab 42%, #292f75 62%, #bd328f 82%, #bd328f 100%);

background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #bd328f), color-stop(18%, #bd328f), color-stop(42%, #2976ab), color-stop(62%, #292f75), color-stop(82%, #bd328f), color-stop(100%, #bd328f));

background: -webkit-linear-gradient(-45deg, #bd328f 0%, #bd328f 18%, #2976ab 42%, #292f75 62%, #bd328f 82%, #bd328f 100%);

background: -o-linear-gradient(-45deg, #bd328f 0%, #bd328f 18%, #2976ab 42%, #292f75 62%, #bd328f 82%, #bd328f 100%);

background: -ms-linear-gradient(-45deg, #bd328f 0%, #bd328f 18%, #2976ab 42%, #292f75 62%, #bd328f 82%, #bd328f 100%);

background: linear-gradient(135deg, #bd328f 0%, #bd328f 18%, #2976ab 42%, #292f75 62%, #bd328f 82%, #bd328f 100%);

}

.gradient {

animation: 8s anim linear infinite;

}

.gradient:after {

transform: translateX(400px);

}

@keyframes anim {

0% {

transform: translateX(0px);

}

100% {

transform: translateX(-400px);

}

}