#212121
1.button { 2 --color: #00A97F; 3 padding: 0.8em 1.7em; 4 background-color: transparent; 5 border-radius: .3em; 6 position: relative; 7 overflow: hidden; 8 cursor: pointer; 9 transition: .5s; 10 font-weight: 400; 11 font-size: 17px; 12 border: 1px solid; 13 font-family: inherit; 14 text-transform: uppercase; 15 color: var(--color); 16 z-index: 1; 17} 18 19.button::before, .button::after { 20 content: ''; 21 display: block; 22 width: 50px; 23 height: 50px; 24 transform: translate(-50%, -50%); 25 position: absolute; 26 border-radius: 50%; 27 z-index: -1; 28 background-color: var(--color); 29 transition: 1s ease; 30} 31 32.button::before { 33 top: -1em; 34 left: -1em; 35} 36 37.button::after { 38 left: calc(100% + 1em); 39 top: calc(100% + 1em); 40} 41 42.button:hover::before, .button:hover::after { 43 height: 410px; 44 width: 410px; 45} 46 47.button:hover { 48 color: rgb(10, 25, 30); 49} 50 51.button:active { 52 filter: brightness(.8); 53} 54
17K views
17K views
Comments
Variations
1 MIT License