要创建不同大小和形状的按钮并考虑各种鼠标交互,可以使用CSS的样式和伪类选择器。以下是一些示例代码:
/* 基础按钮样式 */
.button {
display: inline-block;
padding: 12px 24px;
border: 2px solid #333;
background-color: #fff;
color: #333;
font-size: 16px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
/* 小型按钮 */
.button.small {
padding: 8px 16px;
font-size: 14px;
}
/* 大型按钮 */
.button.large {
padding: 16px 32px;
font-size: 20px;
}
/* 圆形按钮 */
.button.round {
border-radius: 50%;
}
/* 椭圆形按钮 */
.button.oval {
border-radius: 50% / 100%;
}
/* 鼠标悬停 */
.button:hover {
background-color: #333;
color: #fff;
}
/* 聚焦 */
.button:focus {
outline: none;
box-shadow: 0 0 4px #333;
}
/* 按钮按下 */
.button:active {
transform: translateY(2px);
}
关键词高亮:CSS、样式、伪类选择器、悬停、聚焦、按下、边框半径、背景颜色、字体颜色、字体大小、文本对齐、文本装饰、光标样式。