-1

I need a button whose after selector expands and gets disappeared when clicked. I need this effect via CSS. enter image description here

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.

Bill
  • 71
  • 1
  • 9

2 Answers2

0

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>
benedikt
  • 1,899
  • 2
  • 25
  • 30
  • Ya after should disappear but there's should be no content and ::after border should expand. – Bill Jul 11 '17 at 16:57
  • Is that the effect you mean? Otherwise we need some more information about your current html/css code... – benedikt Jul 11 '17 at 17:06
  • Sir, it's cool but when clicked immediately the full animation should run. In your script i just have to hold for some seconds then only ::after gets disappeared and i dont want to disapppear actual button border on click. – Bill Jul 11 '17 at 17:08
  • I woul'd like to have comments with downvotes, so i can improve my answer. As Dejan S. said - Bill should post the rest of the css and html for the button. – benedikt Jul 12 '17 at 07:53
  • Can i put a animation so you guys can understand it? @benedikt – Bill Jul 12 '17 at 13:36
0

**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>
jmag
  • 796
  • 1
  • 8
  • 17
  • Why i have to hold it for long time? And why does blue outline appears after animation? – Bill Jul 12 '17 at 14:56
  • That is because it waits for the transition to finish. You can remove the transition but the effects will be sudden. – jmag Jul 12 '17 at 15:37
  • In this case, the transform will not be visible since the border is transparent. It will jump from `opacity:1;` with transparent to `opacity:0` with red. both are not visible. The effects that are visible takes place during transition time. – jmag Jul 12 '17 at 15:42