如何在CSS中创建按钮缩放效果？

Question

我需要一个按钮，其后选择器扩展并在单击时消失。我需要通过CSS这个效果。

当我点击此按钮时，它会在选择器展开后显示。 像

#button::after{
  transform: scale(2);
} 

但这不适合我。请帮我。单击后选择器按钮应该展开然后应该消失。简而言之，我需要按钮缩放效果。

Answer 1

你的意思是这样吗？

据我所知，您只能使用CSS获取onclick事件而不使用JavaScript。您可以使用：active，但这只会在按住鼠标按钮时应用样式。请参阅Bojangles answer＆＃34; Can I have an Onclick effect in CSS＆＃34;。

＆＃13;

＆＃13;

#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;
}

＆＃13;

<button id="button">BUTTON</button>

＆＃13;

＆＃13;

＆＃13;

Answer 2

**代码片段基于benedikt的回答。

#button:after的边框颜色设置为透明，在动画期间添加边框颜色。这造成了它消失的错觉。我希望这会有所帮助。

#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>