css怎麽将按钮变长,CSS3 按钮边线环绕渐变缩短和伸长

CSS

语言：

CSSSCSS

确定

* {

-webkit-transition-property: all;

-webkit-transition-duration: 0.2s;

-moz-transition-timing-function: cubic-bezier(100, 50, 21, 6);

-moz-transition-property: all;

-moz-transition-duration: 0.2s;

-moz-transition-timing-function: cubic-bezier(100, 50, 21, 6);

}

h1 {

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

color: #c78e2d;

}

body {

background-color: #f3af3a;

padding-top: 70px;

font-family: 'Open Sans', sans-serif;

text-align: center;

font-weight: 100;

}

.btn {

position: relative;

display: inline-block;

width: 166px;

height: 45px;

font-size: 12px;

line-height: 45px;

text-align: center;

text-transform: uppercase;

color: #fff;

cursor: pointer;

overflow: hidden;

}

.btn svg {

position: absolute;

top: 0;

left: 0;

}

.btn svg rect {

fill: none;

stroke: #fff;

stroke-width: 1;

stroke-dasharray: 422, 0;

-webkit-transition: all 1300ms cubic-bezier(0.19, 1, 0.22, 1);

-moz-transition: all 1300ms cubic-bezier(0.19, 1, 0.22, 1);

transition: all 1300ms cubic-bezier(0.19, 1, 0.22, 1);

}

.btn:hover svg rect {

stroke-width: 5;

stroke-dasharray: 10, 310;

stroke-dashoffset: 33;

}

.btn:hover {

color: #fff;

font-size: 18px;

letter-spacing: 1px;

font-weight: bold;

}