做个 3D 按钮

A 风

已于 2024-08-02 15:56:08 修改

阅读量103

点赞数 2

文章标签： 3d css3 css

于 2024-08-02 15:55:34 首次发布

本文链接：https://blog.csdn.net/gxdzi/article/details/140872598

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .button {
            -webkit-appearance: none;
            appearance: none;
            position: relative;
            border-width: 0;
            padding: 0 8px 12px;
            min-width: 10em;
            box-sizing: border-box;
            background: transparent;
            font: inherit;
            cursor: pointer;
        }

        .button-top {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 0;
            padding: 8px 16px;
            transform: translateY(0);
            text-align: center;
            color: #fff;
            text-shadow: 0 -1px rgba(0, 0, 0, .25);
            transition-property: transform;
            transition-duration: .2s;
            -webkit-user-select: none;
            user-select: none;
            background-image: radial-gradient(#cd3f64, #9d3656);
        }

        .button:active .button-top {
            transform: translateY(6px);
        }

        .button-top::after {
            content: '';
            position: absolute;
            z-index: -1;
            border-radius: 4px;
            width: 100%;
            height: 100%;
            box-sizing: content-box;
            background-image: radial-gradient(#cd3f64, #9d3656);
            text-align: center;
            color: #fff;
            box-shadow: inset 0 0 0px 1px rgba(255, 255, 255, .2), 0 1px 2px 1px rgba(255, 255, 255, .2);
            transition-property: border-radius, padding, width, transform;
            transition-duration: .2s;
        }

        .button:active .button-top::after {
            border-radius: 6px;
            padding: 0 2px;
        }

        .button-bottom {
            position: absolute;
            z-index: -1;
            bottom: 4px;
            left: 4px;
            border-radius: 8px / 16px 16px 8px 8px;
            padding-top: 6px;
            width: calc(100% - 8px);
            height: calc(100% - 10px);
            box-sizing: content-box;
            background-color: #803;
            background-image: radial-gradient(4px 8px at 4px calc(100% - 8px), rgba(255, 255, 255, .25), transparent), radial-gradient(4px 8px at calc(100% - 4px) calc(100% - 8px), rgba(255, 255, 255, .25), transparent), radial-gradient(16px at -4px 0, white, transparent), radial-gradient(16px at calc(100% + 4px) 0, white, transparent);
            box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5), inset 0 -1px 3px 3px rgba(0, 0, 0, .4);
            transition-property: border-radius, padding-top;
            transition-duration: .2s;
        }


        .button:active .button-bottom {
            border-radius: 10px 10px 8px 8px / 8px;
            padding-top: 0;
        }
    </style>
</head>

<body>
    <button type="button" class="button">
        <!-- 顶部的按钮：表示实际触发的点击位置 -->
        <div class="button-top">程序员</div>
        <!-- 底部的 div：类似于按钮的“卡槽”，用来呈现 3D 效果 -->
        <div class="button-bottom"></div>
        <!-- 边缘的阴影：使 3D 效果更加仿真 -->
        <div class="button-base"></div>
    </button>
</body>

</html>