css波浪按钮,CSS3 波浪式按钮渐变色

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:700);

body {

background: #f6f6f6;

}

.row {

width: 330px;

padding-top: 130px;

margin: auto;

}

.outlinebtn {

display: inline-block;

padding: 2px;

border-radius: 35px;

vertical-align: middle;

background: #e3164e;

background: linear-gradient(268deg, #e3164e, #7f1ba7, #841c39, #e993e7, #d27228);

filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#e3164e', endColorstr='#d27228', GradientType=1);

background-size: 1000% 1000%;

-webkit-animation: gradient 10s ease infinite;

-moz-animation: gradient 10s ease infinite;

-o-animation: Agradient 10s ease infinite;

animation: gradient 10s ease infinite;

}

.outlinebtn input {

font: 300 14px/14px 'Source Sans Pro', sans-serif;

letter-spacing: 1px;

display: block;

position: relative;

width: 100%;

height: 100%;

padding: 15px 50px;

text-transform: uppercase;

background: #f6f6f6;

border: none;

border-radius: 35px;

color: #5a3db7;

transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

}

.outlinebtn:hover input {

color: #fff;

background: transparent;

}

.outlinebtn-reset {

float: left;

margin-right: 10px;

display: inline-block;

padding: 2px;

border-radius: 35px;

vertical-align: middle;

background: #e3164e;

background: linear-gradient(268deg, #e3164e, #1ba2a7, #4b7793, #93e9d1, #d2a628);

filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#e3164e', endColorstr='#d2a628', GradientType=1);

background-size: 1000% 1000%;

-webkit-animation: gradient 10s ease infinite;

-moz-animation: gradient 10s ease infinite;

-o-animation: gradient 10s ease infinite;

animation: gradient 10s ease infinite;

}

.outlinebtn-reset input {

font: 300 14px/14px 'Source Sans Pro', sans-serif;

letter-spacing: 1px;

display: block;

position: relative;

width: 100%;

height: 100%;

padding: 15px 50px;

text-transform: uppercase;

background: #f6f6f6;

border: none;

border-radius: 35px;

color: #000;

transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

}

.outlinebtn-reset:hover input {

color: #fff;

background: transparent;

}

@-webkit-keyframes gradient {

0% {

background-position: 0% 24%;

}

50% {

background-position: 100% 77%;

}

100% {

background-position: 0% 24%;

}

}

@-moz-keyframes gradient {

0% {

background-position: 0% 24%;

}

50% {

background-position: 100% 77%;

}

100% {

background-position: 0% 24%;

}

}

@-o-keyframes AnimationName {

0% {

background-position: 0% 24%;

}

50% {

background-position: 100% 77%;

}

100% {

background-position: 0% 24%;

}

}

@keyframes gradient {

0% {

background-position: 0% 24%;

}

50% {

background-position: 100% 77%;

}

100% {

background-position: 0% 24%;

}

}