CSS组件之按钮（button）定制样式2

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>三十课 - CSS组件之按钮（button）定制样式2</title>
    <style>
        *{margin: 0px; padding: 0px}
        .button-du {
            text-align: center;
            cursor: pointer;
            font-size:24px;
            border-radius: 4px;
            border: none;
            padding: 8px 12px;
            width: 130px;
            transition: all 0.5s;
        }
        .button-du span {
            cursor: pointer;
            display: inline-block;
            position: relative;
            transition: 0.5s;
        }
        .button-du span:after {
            content: '»';
            position: absolute;
            opacity: 0;
            top: 0;
            right: -20px;
            transition: 0.5s;
        }
        .button-du:hover span {
            padding-right: 25px;
        }
        .button-du:hover span:after {
            opacity: 1;
            right: 0;
        }
        .default {
            color:#fff;
            background-color:#007bff;
        }
        .secondary {
            color:#fff;
            background-color:#6c757d;
        }
        .success {
            color:#fff;
            background-color:#28a745;
        }
        .danger {
            color:#fff;
            background-color:#dc3545;
        }
        .warning {
            color:#212529;
            background-color:#ffc107;
        }
        .info {
            color:#fff;
            background-color:#17a2b8;
        }
        .dark {
            color:#fff;
            background-color:#343a40;
        }
        .buttons {
            padding: 8px;
        }
        .buttons >button {
            margin: 8px;
        }
    </style>
</head>
<body>
<div class="buttons">
    <button class="button-du default"><span>缺 省</span></button>
    <button class="button-du secondary"><span>次 要</span></button>
    <button class="button-du success"><span>成 功</span></button>
    <button class="button-du danger"><span>危 险</span></button>
    <button class="button-du warning"><span>警 告</span></button>
    <button class="button-du info"><span>信 息</span></button>
    <button class="button-du dark"><span>暗 色</span></button>
</div>
</body>
</html>