菜鸟教程在线编辑器

AI 编程工具
 
                <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.btn-group button {
  background-color: #04AA6D; /* 绿色背景 */
  border: 1px solid green; /* 绿色边框 */
  color: white; /* 白色文本 */
  padding: 10px 24px; /* 内边距离、 */
  cursor: pointer; /* 指针/手形图标 */
  float: left; /* 并排浮动按钮 */
}

/* 清除浮动 */
.btn-group:after {
  content: "";
  clear: both;
  display: table;
}

.btn-group button:not(:last-child) {
  border-right: none; /* 防止边框重叠 */
}

/* 鼠标移动到按钮上的效果 */
.btn-group button:hover {
  background-color: #3e8e41;
}
</style>
</head>
<body>

<h1>按钮组</h1>

<div class="btn-group">
  <button>Google</button>
  <button>Runoob</button>
  <button>Apple</button>
</div>

</body>
</html>
              