Beautiful hover effect 1

 HTML CODE

<!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="hover1.css">
    <title>Document</title>
</head>
<body>
    <a class="one" href="#">
    <span class="no"></span>
    <span class="no"></span>
    <span class="no"></span>
    <span class="no"></span>
    Hover
    </a>


    <a class="two" href="#">
        <span class="op"></span>
        <span class="op"></span>
        <span class="op"></span>
        <span class="op"></span>
        Omg Mdn
        </a>
   
</body>
</html>

CSS CODE


body{
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #031321;
    font-family: Product sans;
}

.one{
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    color: #ff4a4a;
    text-transform: uppercase;
    letter-spacing: 4px;
    text-decoration: none;
    font-size: 24px;
    overflow: hidden;
    transition: 0.2s;
}


.one:hover{
    color: #870317;
    background: #ff4a4a;
    box-shadow: 0 0 10px #ff4a4a, 0 0 40px #ff4a4a, 0 0 80px #ff4a4a;
    transition-delay: 1s;
}
.one .no{
    position: absolute;
    display: block;
}

.one .no:nth-child(1){
    top: 0;
    left: -200px;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent,#ff4a4a);
}

.one:hover .no:nth-child(1){
    left: 100%;
    transition: 1s;
}

.one .no:nth-child(3){
    bottom: 0;
    right: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(270deg, transparent, #ff4a4a);
}

.one:hover .no:nth-child(3){
    right: 100%;
    transition: 1s;
    transition-delay: 0.5s;
}


.one .no:nth-child(2){
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent, #ff4a4a);
}

.one:hover .no:nth-child(2){
    top: 100%;
    transition: 1s;
    transition-delay: 0.25s;
}

.one .no:nth-child(4){
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(160deg, transparent, #ff4a4a);
}

.one:hover .no:nth-child(4){
    bottom: 100%;
    transition: 0.7s;
    transition-delay: 0.7s;
}
 


/* --------------------------- */

.two{
    position: relative;
    display: inline-block;
    padding: 25px 40px;
    color: #ffea00;
    text-transform: uppercase;
    letter-spacing: 4px;
    text-decoration: none;
    font-size: 24px;
    overflow: hidden;
    transition: 0.2s;
}


.two:hover{
    color: #3d3801;
    background: #ffea00;
    box-shadow: 0 0 10px #ffea00, 0 0 40px #ffea00, 0 0 80px #ffea00;
    transition-delay: 1s;
}
.two .op{
    position: absolute;
    display: block;
}

.two .op:nth-child(1){
    top: 0;
    left: -250px;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent,#ffef40);
}

.two:hover .op:nth-child(1){
    left: 100%;
    transition: 1s;
}

.two .op:nth-child(3){
    bottom: 0;
    right: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(270deg, transparent, #ffef40);
}

.two:hover .op:nth-child(3){
    right: 100%;
    transition: 1s;
    transition-delay: 0.5s;
}





.two .op:nth-child(2){
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent, #ffef40);
}

.two:hover .op:nth-child(2){
    top: 100%;
    transition: 1s;
    transition-delay: 0.25s;
}

.two .op:nth-child(4){
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(160deg, transparent, #ffef40);
}

.two:hover .op:nth-child(4){
    bottom: 100%;
    transition: 1s;
    transition-delay: 0.75s;
}



Comments

Post a Comment

Popular posts from this blog

Gsap effect on click

 Gsap effect on click   < div class = "item" >     < div class = "circle" ></ div >     < h1 class = "head" >Angela</ h1 >   </ div > Here is the same code, small gsap effect on click; * {     margin: 0 ;     padding: 0 ;     box-sizing: border-box ; } body {     display: flex ;     justify-content: center ;     align-items: center ;     height: 100 vh ;     background-color: rgb ( 10 , 8 , 19 );     color: white ;     font-family: sans-serif ; } .item {     display: flex ;     gap: 1 rem ;     align-items: center ;     cursor: pointer ; } .circle {     height: 20 px ;     width: 20 px ;     background-color: white ;     border-radius: 50 % ; } Javascript; gsap . defaults ({ duration : 0.2 }) const myAnime = gsap . timeline ({ paused...
Read more

Gsap timeline position parameters

 Gsap timeline position parameters In the following timeline code:  let mytimeline = gsap . timeline () mytimeline     . to ( '.box1' ,{ x : 400 , duration : 1 })     . to ( '.box2' ,{ x : 400 , duration : 1 })     . to ( '.box3' ,{ x : 400 , duration : 1 }) normally when animation of box1 completed in 1s then box2 starts and after 1second of box2 animation of box3 starts if the duration of box1 was 5 second then animation of box1 will take 5s to complete and then only animation of box2 starts. For more enhancement the position parameter was introduced Some of the examples of position parameter are: 1. let mytimeline = gsap . timeline () mytimeline     . to ( '.box1' ,{ x : 400 , duration : 1 })     . to ( '.box2' ,{ x : 400 , duration : 1 })     . to ( '.box3' ,{ x : 400 , duration : 1 }, 1 ) On that box 3 there is "1" outside the {} which means that   start exactly at a time of 1 It do...
Read more

Scroll magic javascript

 Scroll magic code Script tags used in html are:     <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js" integrity="sha512-8E3KZoPoZCD+1dgfqhPbejQBnQfBXe8FuwL4z/c8sTrgeDMFEnoyTlH3obB4/fV+6Sg0a0XF+L/6xS4Xx1fUEg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>     <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.min.js" integrity="sha512-RvUydNGlqYJapy0t4AH8hDv/It+zKsv4wOQGb+iOnEfa6NnF2fzjXgRy+FDjSpMfC3sjokNUzsfYZaZ8QAwIxg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>     <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js" integrity="sha512-5/OHwmQzDSBS0Ous4/hlYoWLHd06/d2r7LdKZQVBXOA6PvOqWVXtdboiLTU7lQTGyVoKVTNkwi0ol4gHGlw5ww==" crossorigin="anonymous" referrerpolicy="no-referre...
Read more