Button by JaydipPrajapati1910
#e8e8e8
1.container { 2 width: 400px; 3 height: 400px; 4 position: absolute; 5 left: 50%; 6 top: 50%; 7 transform: translate(-50%, -50%); 8 display: flex; 9 justify-content: center; 10 align-items: center; 11} 12 13.center { 14 width: 180px; 15 height: 60px; 16 position: absolute; 17} 18 19.btn { 20 width: 180px; 21 height: 60px; 22 cursor: pointer; 23 background: transparent; 24 border: 2px solid #222; 25 outline: none; 26 transition: 1s ease-in-out; 27} 28 29.btn svg { 30 position: absolute; 31 left: 0; 32 top: 0; 33 fill: none; 34 stroke: #91C9FF; 35 stroke-dasharray: 150 480; 36 stroke-dashoffset: 150; 37 transition: 1s ease-in-out; 38} 39 40.btn:hover { 41 transition: 1s ease-in-out; 42 background: #4F95DA; 43} 44 45.btn:hover span { 46 transition: 1s ease-in-out; 47 color: #fff; 48} 49 50.btn:hover svg { 51 stroke-dashoffset: -480; 52} 53 54.btn span { 55 color: black; 56 font-size: 18px; 57 font-weight: 600; 58} 59
798 views
798 views
MIT License