按钮特效（笔记）

最新推荐文章于 2024-05-04 00:52:19 发布

c__333

最新推荐文章于 2024-05-04 00:52:19 发布

阅读量592

点赞数 1

分类专栏：按钮特效文章标签：按钮特效

本文链接：https://blog.csdn.net/c__333/article/details/49718369

版权

按钮特效专栏收录该内容

1 篇文章 0 订阅

订阅专栏

案例

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>button</title>
    <link rel="stylesheet" href="D:\HTML\button\css\style.css">
</head>
<body>
<div class="box">
    <div class="link link-miss">
        <span class="icon"></span>
        <a href="#" class="button">
            <span class="line top"></span>
            <span class="line right"></span>
            <span class="line bottom"></span>
            <span class="line left"></span>
        MISSION</a>
    </div>
    <div class="link link-play">
        <span class="icon"></span>
        <a href="#" class="button">
            <span class="line top"></span>
            <span class="line right"></span>
            <span class="line bottom"></span>
            <span class="line left"></span>
        PLAY</a>
    </div>
    <div class="link link-touch">
        <span class="icon"></span>
        <a href="#" class="button">
            <span class="line top"></span>
            <span class="line right"></span>
            <span class="line bottom"></span>
            <span class="line left"></span>
        MISSION</a>
    </div>
</div>  
</body>
</html>

CSS代码

*{
    margin: 0;
    padding: 0;
}
body{
    background: #333;
}
.box{
    width: 800px;
    height: 280px;
    margin: 50px auto;
}
.box .link{
    width: 205px;
    height: 280px;
    float: left;
    margin: 0 20px;
}
.link .icon{
    display: inline-block;
    width: 100%;
    height: 190px;
    transition:all 0.2s ease-out;
}
.link-miss .icon{
    background: url() no-repeat center center;
}
.link-play .icon{
    background: url() no-repeat center center;  
}
.link-touch .icon{
    background: url() no-repeat center center;
}
.link .icon:hover{
    -webkit-transform:rotate(360deg) scale(1.2);
}
.button{
    display: block;
    width: 180px;
    height: 50px;
    position: relative; 
    line-height: 50px;
    text-decoration: none;
    color: #2DCB70;
    font-family: Arial;
    font-weight: bolder;
    border:2px solid rgba(255,255,255,0.8);
    padding-left: 20px;
    margin: 0 auto;
    background: url() no-repeat 130px center;
}
.button:hover{
    border: 2px solid rgba(255,255,255,1);
    background-position: 140px center;
    transition:0.4s ease;
}
.button .line{
    display: block;
    position: absolute;
    background: none;
    transition:0.4s ease;
}
.button:hover .line{
    background: #fff;
}
.button .line-top{
    height: 2px;
    width: 0px;
    left: -110px;
    top: -2px;
}
.button:hover .line-top{
    width: 100%;
    left: -2px; 
}
.button .line-right{
        width: 2px;
        height: 0px;
        right: -2px;
        top: -110%;
}
.button:hover .line-right{
    height: 100%;
    top:-2px;
}
.button .line-bottom{
    width: 2px;
    height: 0px;
    left: -2px;
    bottom: -110%;
}
.button:hover .line-bottom{
    height: 100%;
    bottom: -2px;   
}
.button .line-left{
    width: 0px;
    height: 2px;
    right: -110%;
    bottom: -2px;
}
.button:hover .line-left{
    width: 100%;
    right: -2px;
}