/* Setting margin and padding to 0 on all elements in document. */ *, *:before, *:after { margin: 0; padding: 0; } html { /* Setting font size to 62.5% so that 1rem = 10px. */ font-size: 62.5%; font-family: 'Questrial', sans-serif; } .button { font-size: 3rem; cursor: pointer; /* Giving some space in button. */ padding: 2rem 3.5rem; /* Margin-top and left is just used for position the button in this example. */ margin-top: 10rem; margin-left: 10rem; /* Setting background-color to transparent so that we can see the expanding background. */ background-color: transparent; /* Border radius on top left and bottom right so that the button looks fancy. */ border-top-left-radius: 25px; border-bottom-right-radius: 25px; /* Some styling on the colors. */ border: 2px solid #47b7fc; color: #47b7fc; /* Position relative so that the :before pseudo-element can have position absolute and behave as we want. */ position: relative; /* Overflow is hidden so that the expanding background wont go beyond the borders of our button. */ overflow: hidden; /* Setting the variables that we will use for the :after pseudo-elements positiong. */ --x: 0px; --y: 0px; /* Setting some transition for animation on the color of our button */ transition: color 0.5s ease-in-out 0.05s; } .button:before { /* Always remember content! */ content: ''; /* Setting background-color to the same as the other colors. Looks nice :) */ background-color: #47b7fc; /* Setting some height and width on the element, just so that we have something to scale up. The exact size doesn't matter. */ width: 2rem; height: 2rem; /* Init scaling of 0, so that it expands from 'nothing'. */ transform: scale(0); /* Positon must be absolute so we can move it wherever we want. */ position: absolute; /* Set the top and left positiong of the background. The values will be set with JavaScript. */ top: var(--y); left: var(--x); /* Making the background look like a circle with border-radius 50%. */ border-radius: 50%; /* Z-index must be underneath the buttons z-index, so that it acts like our background. */ z-index: -1; /* Set a transition on the transform property so that when we scale it up it becomes a smooth animation. */ transition: transform 0.5s ease-in-out; } /* The class used for expanding our background. On the normal element we want to change to color to white... */ .size-up { color: white; } /* ...and on the pseudo:element we want to scale it up so that it looks like it expands. */ .size-up:before { transform: scale(35); }

!