CSS动态会发光的按钮

最新推荐文章于 2023-07-28 20:19:46 发布

北巷`

最新推荐文章于 2023-07-28 20:19:46 发布

阅读量475

点赞数

分类专栏： css 文章标签： css3

本文链接：https://blog.csdn.net/weixin_44717486/article/details/113802416

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一个动态会发光的按钮

CSS动态发光按钮

知识点总结：

min-height: 100vh;设置最小行高
overflow:hidden;清除浮动，解决外边距塌陷
transition-delay: 0.5s;过渡效果等待时间

HTML部分

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="bianse.css">
    <title>Document</title>
</head>

<body>
    <a href="#">BUTTON</a>

</body>

</html>

CSS部分

body{
    display: flex;
    justify-content: center;
    align-items: center;
    background: black;
    min-height: 100vh;
}
a{
    position: relative;
    padding: 10px 30px;
    margin: 45px 0;
    color: #21ebff;
    text-decoration: none;
    font-size: 20px;
    text-transform: uppercase;
    transition: 0.5s;
    overflow:hidden;
}
a:hover{
    background: #21ebff;
    color:#111;
    box-shadow:  0 0 50px #21ebff;
    transition-delay: 0.5s;

}
a::before{
    content: "";
    position: absolute;
    top:0;
    left: 0;
    width: 10px;
    height: 10px;
    border-top: 2px solid #21ebff;
    border-left: 2px solid#21ebff;
    transition: 0.5s;
    transition-delay: 0.3s;
}
a:hover::before{
    width: 100%;
    height: 100%;
    transition-delay: 0s;
}
a::after{
    content: "";
    position: absolute;
    bottom:0;
    right: 0;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid #21ebff;
    border-right: 2px solid#21ebff;
    transition: 0.5s;
    transition-delay: 0.3s;
}
a:hover::after{
    width: 100%;
    height: 100%;
    transition-delay: 0s;
}

来源于b站教学视频

北巷`

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
CSS动态会发光的按钮

一个动态会发光的按钮 CSS动态发光按钮知识点总结：min-height: 100vh;设置最小行高overflow:hidden;清除浮动，解决外边距塌陷transition-delay: 0.5s;过渡效果等待时间HTML部分<!DOCTYPE html><html lang="en"><head> <meta
复制链接

扫一扫