[分享]css3扁平化按钮

CSS3扁平化按钮是一种时尚且现代的设计趋势，它可以让网站看起来更加干净简洁，让用户操作更加方便快捷。下面是一个简单示例，展示如何使用CSS3实现扁平化按钮。 / button styles / ....

CSS3扁平化按钮是一种时尚且现代的设计趋势，它可以让网站看起来更加干净简洁，让用户操作更加方便快捷。下面是一个简单示例，展示如何使用CSS3实现扁平化按钮。

  /* button styles */
    
    .button {
    background-color: #2ecc71; /* 设置背景色 */
    border: none; /* 去掉边框 */
    border-radius: 5px; /* 设置圆角 */
    color: white; /* 设置字体颜色 */
    cursor: pointer; /* 设置光标为手型 */
    padding: 15px 32px; /* 设置内边距 */
    text-align: center; /* 设置文本居中 */
    text-decoration: none; /* 去掉下划线 */
    display: inline-block; /* display属性设置为行内块元素 */
    font-size: 16px; /* 设置字体大小 */
}
    
.button:hover {
    background-color: #27ae60; /* 按下鼠标时改变背景色 */
} 

在上面的示例中，我们首先定义了一个类名为button的样式，在该样式中设置了背景颜色、边框、圆角、字体颜色、光标、内边距、文本居中等属性。可以根据需要更改这些属性。之后，我们定义了一个:hover伪类来设置按钮在鼠标悬停时的颜色变化。

通过这种方式，我们可以轻松地实现一些漂亮的按钮效果，使网站看起来更为美观和专业。需要注意的是，在实现按钮效果时，应该充分考虑用户体验，设计出最优的样式。