Button by santhoshsj-dev
#e8e8e8
1.button { 2 position: relative; 3 padding: 24px 64px; 4 border-radius: 50px; 5 color: #fafafa; 6 text-transform: uppercase; 7 font-weight: 900; 8 letter-spacing: 2px; 9 background-color: #212121; 10 border: solid 1px #fafafa4d; 11 overflow: hidden; 12 cursor: pointer; 13 transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1); 14} 15 16.button .button-text { 17 position: relative; 18 z-index: 2; 19} 20 21.button .fill-container { 22 position: absolute; 23 left: 0; 24 top: 50%; 25 width: 100%; 26 padding-bottom: 100%; 27 transform: translateY(-50%) rotate(180deg); 28} 29 30.button .fill-container::after { 31 content: ''; 32 position: absolute; 33 left: 0; 34 top: 0; 35 width: 100%; 36 height: 100%; 37 background-color: blue; 38 border-radius: 50px; 39 transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1); 40 transform: translateY(-100%); 41} 42 43.button:hover { 44 border-color: blue; 45 transform: translateY(-4px); 46} 47 48.button:hover .fill-container { 49 transform: translateY(-50%) rotate(0); 50} 51 52.button:hover .fill-container::after { 53 transform: translateY(0); 54}
704 views
704 views
Variations
2 MIT License