表白按钮神器-html代码-BFW代码库

表白按钮神器

代码语言：html

所属分类：表白

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>
        .extendor {
            padding: 10px;
            display: inline-block;
            position: relative;
            border-width: 2px;
            margin: 6px;
            min-width: 100px;
            min-height: 44px;
        }
        .extendor, .extendor::before, .extendor::after {
            transition: transform 100ms ease-in-out;
        }
        .extendor::before, .extendor::after {
            content: '';
            position: absolute;
            border: 0 solid transparent;
            z-index: -1;
            transition-property: border-width, top, left, bottom, right;
        }
        .extendor::before {
            top: -2px;
            right: calc(100% + 2px);
            bottom: -2px;
            border-right-color: inherit;
        }
        .extendor::after {
            top: calc(100% + 2px);
            left: -2px;
            right: -2px;
            border-top-color: inherit;
        }
        .extendor:hover::before, .extendor:focus::before {
            border-top-width: 6px;
            border-right-width: 6px;
            bottom: -8px;
        }
        .extendor:hover::after, .extendor:focus::after {
            border-top-width: 6px;
            border-right-width: 6px;
            left: -8px;
        }
        .extendor:active {
            transform: translateX(-2px) translateY(2px);
        }
        .extendor:active, .extendor:active::before, .extendor:active::after {
            transition-duration: 50ms;
        }
        .extendor:active::before {
            border-top-width: 4px.........完整代码请登录后点击上方下载按钮下载查看