30秒的CSS - 动态按钮

只需要30秒学会的CSS - 动态按钮

---

一组初始 html 如下

    <button class="btn btn1">btn style</button>
    <button class="btn btn2">btn style</button>

样式预览

---

接下来为 btn 设置样式

    .btn {
    /* 去掉按钮背景颜色 */
    background: none;
    border: 2px solid #000;
    /* 英文格式化为大写 */
    text-transform: uppercase;
    padding: 12px 20px;
    min-width: 180px;
    /* 改变选中后的鼠标样式 */
    cursor: pointer;
}

样式预览

---

为 btn 添加动画

    .btn {
        position: relative;
        background: none;
        border: 2px solid #000;
        text-transform: uppercase;
        padding: 12px 20px;
        min-width: 180px;
        cursor: pointer;
        /* 设置动画时间以及速度方式 */
        transition: all 0.4s linear;
    }

    .btn:hover {
        color: #f1f1f1;
    }

    .btn::before {
        position: absolute;
        content: "";
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: #000;
        z-index: -1;
        transform-origin: 0 0;
        /* 使 transform 动画用 0.5s 执行完成 */
        transition: transform 0.5s;
        /* 贝塞尔曲线 */
        transition-timing-function: cubic-bezier(0.5, 1.6, 0.4, 0.7);
    }

    /* 使按钮动画由X轴 从 0 到 1 */
    .btn1::before {
        transform: scaleX(0)
    }
  
    .btn1:hover::before {
        transform: scaleX(1)
    }

    /* 使按钮动画由Y轴 0 到 1 */
    .btn2::before {
        transform: scaleY(0)
    }

    .btn2:hover::before {
        transform: scaleY(1)
    }

样式预览 - (GIF看起来可能有点卡 , 实际上效果是不错的 , 建议尝试一下)

---

源码下载

---

相关资料

CSS cursor
CSS text-transform
CSS3 transform
CSS3 transition
贝塞尔曲线