pure css button hover awesome effects























HTML code:-


<!DOCTYPE html>
<html>
<head>
                <title>CSS Button hover awesome effects</title>
</head>
<body>

                <a href="#">
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                Button
                </a>

</body>
</html>


CSS code:-

/*Background_design*/
body
{
                margin:0;
                padding: 0;
                display: flex;
                min-height: 100vh;
                align-items: center;
                justify-content: center;
                background: #d96579;
}

/*Button_design*/
a
{
                position: relative;
                text-decoration: none;
                padding: 25px 50px;
                background: #ff2680;
                font-weight: bold;
                border-top-left-radius: 20px;
                border-bottom-right-radius: 20px;
                text-transform: uppercase;
                transition: .5s;
                font-family: sans-serif;
                overflow: hidden;
                box-shadow: 0 7px 8px rgba(0,0,0,.3);
}
a:hover
{
                box-shadow: 0 3px 5px rgba(0,0,0,.6);
}

/*Border_design*/
a span
{
                position: absolute;
                transition: 1s;
}

a span:nth-child(1)
{
                left: 0;
                top: 0;
                width: 0;
                height: 1px;
                background:#88ff2e;
}
a:hover span:nth-child(1)
{
                width: 80%;
                transform:translate(100%);
}

a span:nth-child(2)
{
                right: 0;
                bottom: 0;
                width: 0;
                height: 1px;
                background:#88ff2e;
}
a:hover span:nth-child(2)
{
                width: 80%;
                transform:translate(-100%);
}

a span:nth-child(3)
{
                right: 0;
                bottom: 0;
                width: 1px;
                height: 0;
                background:#88ff2e;
}
a:hover span:nth-child(3)
{
                height: 100%;
                transform:translateY(-60%);
}

a span:nth-child(4)
{
                left: 0;
                top: 0;
                width: 1px;
                height: 0;
                background:#88ff2e;
}
a:hover span:nth-child(4)
{
                height: 80%;
                transform:translateY(60%);
}





Post a Comment

0 Comments