css样实现按钮 |css的基本作用是什么

是网页设计中最常见的元素之一，而通过使用CSS样式表可以轻松地创建各种样式、形状和颜色的按钮。下面大家将通过使用CSS代码来实现两种简单的按钮样式。首先，大家将创建一个常规的圆角按钮，代码如下：

button {
background-color: #4CAF50; /* 设置背景颜色 */
border: none; /* 去除边框 */
color: white; /* 设置字体颜色 */
padding: 15px 32px; /* 设置内边距 */
text-align: center; /* 设置文本居中 */
text-decoration: none; 
display: inline-block;
font-size: 16px; /* 设置字体大小 */
border-radius: 10px; /* 设置圆角 */
cursor: pointer; /* 设置鼠标指针样式 */
}

这段代码中，大家定义了按钮的背景颜色、字体颜色、内边距、文本居中、字体大小、圆角、鼠标指针样式等基本属性，使按钮具有了圆角、鼠标悬浮等基本样式。接下来，大家将创建一个带动画效果的按钮，代码如下：

button {
background-color: #008CBA;
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 9px;
-webkit-transition-duration: 0.4s; /* 设置过渡时间 */
transition-duration: 0.4s;
-webkit-transition-property: box-shadow, background-color; /* 设置过渡效果 */
transition-property: box-shadow, background-color;
}
button:hover {
background-color: #006699;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
/* 添加阴影效果 */
}

这段代码中，大家添加了过渡效果和阴影效果，使按钮在鼠标移入时可以有动画效果，更加生动。同样地，大家也定义了按钮的各种基本样式属性，这里不再赘述。在使用上述代码时，大家可以将它们插入到HTML文档的<head>标签中，或将CSS代码单独保存成一个.css文件，再通过<link>标签引入到HTML文档中。具体使用方式可以参考CSS基础教程。