定制按钮（button）样式2

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>42度空间-定制按钮（button）样式2</title>
    <style>
        .button-du {
            border-radius: 5px;
            padding: 16px 32px;
            font-size: 24px;
            text-decoration: none;
            margin: 8px;
            color: #fff;
            border: none;
            cursor: pointer;
            position: relative;
            display: inline-block;
        }
        .button-du:active {
            transform: translate(0px, 5px);
            -webkit-transform: translate(0px, 5px);
            box-shadow: 0px 1px 0px 0px;
        }
        .blue {
            background-color: #55acee;
            box-shadow: 0px 5px 0px 0px #3C93D5;
        }
        .blue:hover {
            background-color: #6FC6FF;
        }
        .green {
            background-color: #2ecc71;
            box-shadow: 0px 5px 0px 0px #15B358;
        }
        .green:hover {
            background-color: #48E68B;
        }
        .red {
            background-color: #e74c3c;
            box-shadow: 0px 5px 0px 0px #CE3323;
        }
        .red:hover {
            background-color: #FF6656;
        }
        .purple {
            background-color: #9b59b6;
            box-shadow: 0px 5px 0px 0px #82409D;
        }
        .purple:hover {
            background-color: #B573D0;
        }
        .orange {
            background-color: #e67e22;
            box-shadow: 0px 5px 0px 0px #CD6509;
        }
        .orange:hover {
            background-color: #FF983C;
        }
        .yellow {
            background-color: #f1c40f;
            box-shadow: 0px 5px 0px 0px #D8AB00;
        }
        .yellow:hover {
            background-color: #FFDE29;
        }
    </style>
</head>
<body>
<div class="buttons">
    <button class="button-du blue">蓝 色</button>
    <button class="button-du green">绿 色</button>
    <button class="button-du red">红 色</button>
    <button class="button-du purple">紫 色</button>
    <button class="button-du orange">橙 色</button>
    <button class="button-du yellow">黄 色</button>
</div>
</body>
</html>