写一段html程序 包含一个圆形美化后的按键
时间: 2023-11-27 17:03:44 浏览: 32
以下是一个简单的 HTML 程序,包含一个圆形美化后的按键:
```html
<!DOCTYPE html>
<html>
<head>
<title>圆形美化后的按键</title>
<style>
.button {
background-color: #4CAF50; /* 设置背景颜色 */
border: none; /* 去掉边框 */
border-radius: 50%; /* 将按钮变成圆形 */
color: white; /* 设置文字颜色 */
padding: 15px 32px; /* 设置内边距 */
text-align: center; /* 文字居中 */
text-decoration: none; /* 去掉下划线 */
display: inline-block; /* 将按钮变成行内元素 */
font-size: 16px; /* 设置文字大小 */
margin: 4px 2px; /* 设置外边距 */
cursor: pointer; /* 设置鼠标样式 */
transition-duration: 0.4s; /* 设置过渡动画时间 */
}
.button:hover {
background-color: #008CBA; /* 鼠标悬浮时,设置背景颜色 */
color: white; /* 鼠标悬浮时,设置文字颜色 */
}
</style>
</head>
<body>
<button class="button">点击我</button>
</body>
</html>
```
这个程序定义了一个名为 `button` 的 CSS 样式类,用于美化按钮。具体来说,它设置了以下属性:
- `background-color`:设置背景颜色为绿色。
- `border`:去掉边框。
- `border-radius`:将按钮变成圆形。
- `color`:设置文字颜色为白色。
- `padding`:设置内边距。
- `text-align`:文字居中。
- `text-decoration`:去掉下划线。
- `display`:将按钮变成行内元素。
- `font-size`:设置文字大小。
- `margin`:设置外边距。
- `cursor`:设置鼠标样式。
- `transition-duration`:设置过渡动画时间为 0.4 秒。
然后,将这个样式类应用到一个 `button` 元素上,即可得到一个圆形美化后的按键。当鼠标悬浮在按钮上时,它的背景颜色和文字颜色会发生变化,以提供一些反馈。