设置一个#E7F3EE色无边框圆角边框,内含三个按钮
时间: 2024-10-25 08:02:49 浏览: 8
CSS圆角边框制作指南与实例
要在网页或UI设计中创建一个带有颜色#E7F3EE、无边框且有圆角的按钮组,可以结合HTML、CSS和可能的JavaScript。这里是一个基本示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
.button-container {
display: flex;
justify-content: center;
align-items: center;
}
.rounded-button {
background-color: #E7F3EE;
border: none;
border-radius: 5px; /* 设定圆角 */
cursor: pointer;
padding: 10px 20px;
margin: 5px;
transition: all 0.3s ease;
}
.rounded-button:hover {
transform: scale(1.1);
}
/* 如果需要响应式,添加媒体查询 */
@media (max-width: 600px) {
.rounded-button {
padding: 8px 16px;
}
}
</style>
</head>
<body>
<div class="button-container">
<button class="rounded-button" onclick="alert('按钮1')">按钮1</button>
<button class="rounded-button" onclick="alert('按钮2')">按钮2</button>
<button class="rounded-button" onclick="alert('按钮3')">按钮3</button>
</div>
</body>
</html>
```
这个例子中,我们设置了三个按钮(分别对应`按钮1`、`按钮2`和`按钮3`),每个按钮都有#E7F3EE的背景色,并且没有边框。鼠标悬停时,按钮会稍微放大(scale(1.1))以增加交互感。
阅读全文