Button by KINGFRESS
#e8e8e8
1button { 2 background-color: transparent; 3 color: white; 4 font-weight: bold; 5 height: 3.3em; 6 width: 12em; 7 border: none; 8 border-radius: 25px; 9 cursor: pointer; 10 transition: .4s ease; 11 position: relative; 12 overflow: hidden; 13 text-transform: uppercase; 14 display: flex; 15 justify-content: center; 16 align-items: center; 17} 18 19button .gradient { 20 height: 100%; 21 width: 350%; 22 background: linear-gradient(to right, #156aa3 25%, #64EAE7 65%, #16a085 90%); 23 position: absolute; 24 top: 0; 25 left: 60%; 26 transform: translateX(-50%); 27 z-index: -1; 28 transition: .4s ease; 29} 30 31button .txt { 32 transition: .4s ease .5s; 33} 34 35button .txt2 { 36 position: absolute; 37 opacity: 0; 38 transition: .4s; 39} 40 41button:hover .gradient { 42 transition: .4s ease; 43 transform: translateX(-40%); 44} 45 46button:focus .gradient { 47 background-size: 200%; 48 background-position: right; 49 transform: translateX(-88%); 50 transition: 1s ease; 51} 52 53button:focus .txt { 54 opacity: 0; 55 transition: .4s ease; 56} 57 58button:focus .txt2 { 59 opacity: 1; 60 transition: 1s ease .5s; 61}
988 views
988 views
MIT License