最简单的css3按钮动画_简单的按钮动画

作者：小丑西瓜9 | 2024-03-18 23:35:41

踩

简单的按钮动画

 
  <!DOCTYPE html> 
 
  <html 
  lang= 
  "en" 
  > 
 
  <head> 
 
  <meta 
  charset= 
  "UTF-8" 
  > 
 
  <meta 
  name= 
  "viewport" 
  content= 
  "width=device-width, initial-scale=1.0" 
  > 
 
  <meta 
  http-equiv= 
  "X-UA-Compatible" 
  content= 
  "ie=edge" 
  > 
 
  <title>Document 
  </title> 
 
  <style> 
 
  # 
  box  
  input { 
 
  display: 
  block; 
 
  margin: 
  100 
  px 
    
  auto 
   0 
  px; 
 
  outline: 
  none; 
 
  border: 
  none; 
 
  height: 
  50 
  px; 
 
  width: 
  100 
  px; 
 
  color: 
  #fff; 
 
  font-size: 
  1 
  em; 
 
  background-color: 
   #ff0099; 
 
  border-radius: 
   5 
  px; 
 
  box-shadow: 
  0 
  px 
   0 
  px 
   5 
  px 
   2 
  px 
    
  #ec7cb4; 
 
  transform: 
  scale 
  ( 
  1 
  ); 
 
  transition-duration: 
   0.3 
  s 
 
   } 
 
  # 
  box  
  input: 
  active { 
 
  transform: 
  scale 
  ( 
  0.9 
  ); 
 
  transition-duration: 
   0.3 
  s 
 
   } 
 
  < 
  /style> 
 
  </head> 
 
  <body> 
 
  <div 
  id= 
  "box" 
  > 
 
  <input 
  type= 
  "button" 
  value= 
  "click me!" 
  > 
 
  </div> 
 
  </body> 
 
  </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/266169