Button by eduardo-amaro-maciel
#e8e8e8
1.button { 2 width: 150px; 3 height: 50px; 4 border-radius: 50px; 5 background-color: transparent; 6 border: 2px solid #000814; 7 overflow: hidden; 8 position: relative; 9 font-size: 16px; 10 font-weight: 500; 11 text-transform: uppercase; 12 transition: 300ms ease; 13} 14 15.button::before { 16 content: ""; 17 position: absolute; 18 z-index: -1; 19 width: 150px; 20 height: 150px; 21 border-radius: 50%; 22 background-color: #003566; 23 top: 100%; 24 left: 0; 25 transition: 500ms ease; 26} 27 28.button:hover { 29 color: #fff; 30 letter-spacing: 3px; 31} 32 33.button:hover::before { 34 top: 50%; 35 left: 50%; 36 transform: translate(-50%, -50%); 37} 38
638 views
638 views
MIT License