This post is saved as a draft.
#212121
1button { 2 background-color: transparent; 3 width: 13em; 4 height: 3.3em; 5 border: 2px solid #1abc9c; 6 border-radius: 25px; 7 font-weight: bold; 8 text-transform: uppercase; 9 color: #1abc9c; 10 padding: 2px; 11 display: flex; 12 justify-content: center; 13 align-items: center; 14 position: relative; 15 overflow: hidden; 16 cursor: pointer; 17} 18 19button .txt { 20 transition: .4s ease-in-out; 21 position: absolute; 22} 23 24button .txt2 { 25 transform: translateY(1em) scale(0); 26 color: #212121; 27 position: absolute; 28} 29 30button .loader-container { 31 height: 100%; 32 width: 100%; 33 background-color: transparent; 34 border-radius: inherit; 35 display: flex; 36 justify-content: center; 37 align-items: center; 38 z-index: -1; 39 overflow: hidden; 40} 41 42button .loader-container .loader { 43 height: 100%; 44 width: 100%; 45 background-color: #1abc9c; 46 border-radius: inherit; 47 transform: translateX(-13em); 48} 49 50button:focus { 51 transition: .4s ease-in-out .4s; 52 animation: scaling 1.5s ease-in-out 0s 1 both; 53} 54 55button:focus .txt { 56 position: absolute; 57 transform: translateY(-5em); 58 transition: .4s ease-in-out; 59} 60 61button:focus .txt2 { 62 transform: translateY(0) scale(1); 63 transition: .3s ease-in-out 1.7s; 64} 65 66button:focus .loader { 67 display: block; 68 transform: translate(0); 69 transition: .8s cubic-bezier(0,.4,1,.28) .4s; 70 animation: loading; 71} 72 73@keyframes scaling { 74 20% { 75 height: 1.5em; 76 } 77 78 80% { 79 height: 1.5em; 80 } 81 82 100% { 83 height: 3.3em; 84 } 85}
Variation of abutton
Variation of abutton