How to create button scaling effect in CSS? - css

Question

I need a button whose after selector expands and gets disappeared when clicked. I need this effect via CSS.
When i click this button it's after selector expands.
Like
#button::after{
transform: scale(2);
}
But this is not happening for me. Please help me. When clicked the after selector button should expand then should disappear. In a nutshell, i need button scaling effect.

Answer 1

Do you mean something like this?
As far as I know you can't get an onclick event with CSS only and without using JavaScript. You can use :active, but this will only apply the style when the mouse button is held down. See Bojangles answer on "Can I have an Onclick effect in CSS".
#button {
display: block;
border: none;
position: relative;
color: red;
background-color: white;
font-size: 30px;
padding: 15px 30px;
}
#button:after {
content: '';
position: absolute;
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
border: 4px solid red;
color: black;
font-size: 8px;
opacity: 1;
transition: transform .3s ease, opacity .5s ease;
}
#button:active:after {
transform: scale(5);
opacity: 0;
}
<button id="button">BUTTON</button>

Answer 2

**The code snippet is built upon on benedikt's answer.
#button:after's border color is set to transparent, adds border-color during the animation. this creates the illusion that it disappears. I hope this helps.
#button {
display: block;
border: 4px solid red;
position: relative;
color: red;
background-color: white;
font-size: 30px;
padding: 15px 30px;
}
#button:after {
content: '';
position: absolute;
display: block;
width:100%;
height:100%;
top:0;
left:0;
border: 4px solid transparent;
color: black;
font-size: 8px;
opacity: 1;
transition: transform 0.3s ease, opacity 0.5s ease, border-color 0.1s ease;
}
#button:active:after {
transform: scale(2);
border-color:red;
opacity: 0;
}
<button id="button">BUTTON</button>