纯CSS实现按钮特效

纯CSS实现一些按钮特效

<button class="btn1">Hello World</button>

利用伪类标签hover和after给按钮添加一些悬浮效果

		.btn1 {
            background-color: white;
            border: 1px solid rgb(255, 99, 99);
            color: rgb(255, 99, 99);
            z-index: 1;
        }
		.btn1::before {
            content: "";
            position: absolute;
            top: 0;
            height: 0%;
            width: 100%;
            left: 0;
            background-color: rgb(255, 99, 99);
            border-radius: 0 0 50% 50%;
            transition: 0.5s;
            z-index: -1;
        }

        .btn1:hover {
            color: white;
        }

        .btn1:hover::before {
            height: 190%;
        }

按钮项目地址:http://duanggang.gitee.io/webgo/pages/button