CSS 按钮各种按钮效果大荟萃【过渡变色效果：transition-duration 属性来设置 "hover" 效果的速度；按钮动画效果，transition加上after伪类】

四哥-云上

于 2016-07-22 09:32:43 发布

阅读量1.3k

点赞数 1

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/yongbin668/article/details/51991707

版权

本文详细介绍了如何使用CSS设计各种样式的按钮，包括基本样式、颜色、大小、圆角、边框颜色、鼠标悬停效果、阴影、禁用样式、宽度调整、按钮组以及创新的动画效果，如过渡、箭头标记和点击反馈。通过实例展示了CSS的transition和after伪类等技巧在按钮设计中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS 按钮

本章节我们为大家介绍使用 CSS 来制作按钮。

基本按钮样式

CSS 实例

 
  .button { 
  
  background-color: 
   #4CAF50;  
  /* Green */ 
  
  border: 
   none; 
  
  color: 
   white; 
  
  padding: 
   15px 32px; 
  
  text-align: 
   center; 
  
  text-decoration: 
   none; 
  
  display: 
   inline-block; 
  
  font-size: 
   16px; 
  
 }

尝试一下 »

按钮颜色

我们可以使用 background-color 属性来设置按钮颜色:

CSS 实例

   .button1 {background-color: #4CAF50;} /* Green */ 
  
 .button2 {background-color: #008CBA;} /* Blue */ 
  
 .button3 {background-color: #f44336;} /* Red */  
  
 .button4 {background-color: #e7e7e7; color: black;} /* Gray */  
  
 .button5 {background-color: #555555;} /* Black */

尝试一下 »