html - 谁能告诉我为这个按钮制作一个合适的动画? (如按压)

标签 html css animation button

<分区>

.button {
  font-size: 18px;
  font-family: Bradley Hand;
  color: purple;
  background: rgb(0, 255, 0);   /*Default settings for button*/
  border: 5px;
  width: 100px;
  height: 50px;
  transition-duration: 0.5s;
  border-radius: 10%;
}
.button:hover {
  background: rgb(0, 255, 125); /*Changes the buttons size, color,*/
  width: 120px;                 /*and font size*/
  height: 60px;
  font-size: 22px;
}
<button class = "button">Click me!</button>

我希望它看起来就像您真的在按下一个按钮。有人帮忙!

最佳答案

尝试看看 w3schools 上的这一面,他们在按钮动画上有一些非常好的代码。 https://www.w3schools.com/howto/howto_css_animate_buttons.asp

关于html - 谁能告诉我为这个按钮制作一个合适的动画? (如按压),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46081354/

上一篇:CSS 翻译到浏览器窗口的左上角

下一篇:html - 垂直对齐此文本我缺少什么?

相关文章:

jquery - 如果链接激活了一个类,你如何滑动切换一个 div?

javascript - 如何只在第一次显示动画 html css

HTML/CSS 边距或填充问题

html - 如何将背景图像移到后面并将登录容器移到前面

css - 无法删除页脚上的边距/填充

html - 是否可以使用 CSS 媒体查询来隐藏输入框但在打印时显示它们的值?

css - jQuery Mobile 面板不会将页面推过去

java - 如何使用 Java Trident 库在 CardLayout 中制作面板动画?

android - 如何在布局转换期间为操作栏设置动画?

php - 在不使用标题的情况下使用 PHP 调整图像大小