Button Hover Effect

 


HTML :

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Button by Growcode</title>
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
    <a href="#"><span> Welcome</span></a>
   </body>
</html>

CSS :

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: black;
}
a{
    position: relative;
    background: #0690fd;
    color: #fff;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
    box-shadow: 0 20px 25px #0690fd44;
    overflow: hidden;
    text-decoration:solid;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 1.1em;
}
a:hover{
    width: 200px;
    transition-delay: 0.5s;
}
a span{
    visibility: hidden;
    opacity: 0;
    transition: 0.5s;
    transform: translate(-30px);
}
a:hover span{
    visibility: visible;
    opacity: 1;
    transition-delay: 0.75s;
    transform: translateX(10px);
}
a::before{
    content: '';
    position: absolute;
    right: 25px;
    width: 12px;
    height: 12px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: rotate(45deg);
}
a:hover::before{
    transform: rotate(45deg) translate(50px,-50px);
}
a::after{
    content: '';
    position: absolute;
    left: -50px;
    width: 12px;
    height: 12px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform:
    rotate(45deg) translate(-50px,50px);
}
a:hover::after{
    transform: rotate(45deg) translate(50px,-50px);
    transition-delay: 1s;
}




Comments

Post a Comment

Popular Posts