CSS3是一种用于网页设计的强大工具,可以轻松地制作出各种酷炫的效果。其中,CSS3按钮制作就是一项常见任务,下面我们就来学习如何制作一个绿色的CSS3按钮。/ 首先定义按钮样式 / .btn { b...
CSS3是一种用于网页设计的强大工具,可以轻松地制作出各种酷炫的效果。其中,CSS3按钮制作就是一项常见任务,下面我们就来学习如何制作一个绿色的CSS3按钮。
/* 首先定义按钮样式 */
.btn {
background-color: #4CAF50; /* 绿色背景 */
border: none; /* 去掉边框 */
color: white; /* 白色字体 */
padding: 15px 32px; /* 内边距 */
text-align: center; /* 居中显示 */
text-decoration: none; /* 去掉链接下划线 */
display: inline-block; /* 内联块元素 */
font-size: 16px; /* 字体大小 */
margin: 4px 2px; /* 外边距 */
cursor: pointer; /* 鼠标变为手型 */
border-radius: 6px; /* 圆角 */
}
/* 鼠标悬停时按钮背景颜色变浅 */
.btn:hover {
background-color: #3E8E41;
}
/* 鼠标按下时按钮背景颜色变更深 */
.btn:active {
background-color: #3E8E41;
transform: translateY(2px); /* 按钮下移2像素 */
} 以上就是制作绿色CSS3按钮的代码,我们可以根据自己的需求修改按钮样式,例如调整背景颜色、边框、字体等。