[分享]css3按钮功能介绍

CSS3的出现大大提升了网页设计的灵活性和可操作性，其中最常用的功能之一就是按钮的设计。下面介绍几个常见的CSS3按钮样式。/ 圆角按钮 / .button{ padding: 10px 20px; ...

CSS3的出现大大提升了网页设计的灵活性和可操作性，其中最常用的功能之一就是按钮的设计。下面介绍几个常见的CSS3按钮样式。

/* 圆角按钮 */
.button{
   padding: 10px 20px;
   border-radius: 30px;
   background-color: #55a6ff;
   color: #fff;
   text-align: center;
}

/* 边框按钮 */
.btn-outline{
   padding: 10px 20px;
   border: 2px solid #55a6ff;
   border-radius: 30px;
   color: #55a6ff;
   text-align: center;
}

/* 悬浮变色 */
.button:hover{
   background-color: #3786d0;
}

/* 按钮点击*/
.button:active{
   background-color: #1e5b9f;
} 

以上代码展示了三种常用的CSS3按钮样式，分别是圆角按钮、边框按钮以及在悬浮和点击时变色的按钮。

使用这些样式可以使你的网站设计更加美观动人，提升用户的体验和页面的可交互性。