css 带边框按钮组 - 自学教程(runoops.com)

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>css 带边框按钮组 - 自学教程(runoops.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>

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

</body>

</html>