261 views
1.btn { 2 position: relative; 3 display: inline-block; 4 width: 150px; 5 height: 50px; 6 text-align: center; 7 text-transform: uppercase; 8 background-color: transparent; 9 cursor: pointer; 10 font-weight: 900; 11 font-size: 17px; 12 border: none; 13 outline: none; 14} 15 16.btn svg { 17 position: absolute; 18 top: 0; 19 left: 0; 20 width: 100%; 21 height: 100%; 22} 23 24.btn svg rect { 25 stroke-width: 3; 26 stroke-dasharray: 0,0; 27 stroke-dashoffset: 0; 28 -webkit-transition: all .6s ease; 29 transition: all .6s ease; 30} 31 32.btn span { 33 background: rgba(255,130,130,1); 34 background: linear-gradient(to right, rgba(255,130,130,1) 0%,rgba(225,120,237,1) 100%); 35 background-clip: text; 36 -webkit-background-clip: text; 37 -webkit-text-fill-color: transparent; 38} 39 40.btn:hover svg rect { 41 stroke-width: 4; 42 stroke-dasharray: 196, 543; 43 stroke-dashoffset: 437; 44} 45
MIT License