1、css3 动态button展示学习

cyz1410012024-05-31 17:31

效果图：

1、首先创建html代码：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>关注我</button>
</body>
</html>

2、展示css3代码：

css 复制代码

button{
        width: 120px;
        height: 38px;
        background-color: transparent;
        color: #000;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 20px;
        font-weight: 600;
        font-family: Arial, Helvetica, sans-serif;
        box-sizing: border-box;
        position: relative;
        transition: all 0.6s ease-in-out;
    }
    button:after{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 1px;
        height: inherit;
        background-color: #333;
        z-index: -1;
        transition: all 0.6s ease-in-out;
    }
    button:hover{
        color: aliceblue;
        cursor: pointer;
    }
    button:hover:after{
        width: 100%;
        border-radius: 6px;
    }

本人也是学习阶段，希望能够一起学习，高手请留余地勿喷。