• HTML
• CSS

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="container">
    <div class="card">
        <div class="logo">
            <span class="circle circle1"></span>
            <span class="circle circle2"></span>
            <span class="circle circle3"></span>
            <span class="circle circle4"></span>
            <span class="circle circle5">
                <i class="fa-solid fa-seedling"></i>
            </span>
        </div>
        
        <div class="glass">
            <div class="content">
                <h1>Rayen</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing alit. Earum, autem.</p>
            </div>
            
            <div class="footer">
                <div class="social">
                    <span class="social_icons">
                        <i class="fa-brands fa-facebook"></i>
                    </span>
                    <span class="social_icons">
                        <i class="fa-brands fa-linkedin"></i>
                    </span>
                    <span class="social_icons">
                        <i class="fa-brands fa-square-twitter"></i>
                    </span>
                </div>
                
                <div class="link">
                    Read More <i class="fa-solid fa-arrow-up-right-from-square"></i>
                </div>
            </div>
            
        </div>
    </div>
</div>

CSS

*{
    margin:0;padding:0;box-sizing:border-box;
}
:root{
    --prime_color:#00894d;
}
body{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
}
.container{
    width:300px;
    height:300px;
    perspective:1000px;
}
.card{
    height:100%;
    border-radius:50px;
    background:linear-gradient(135deg,#00ffd6,#08e260);
    transition:0.5s ease-in-out;
    transform-style:preserve-3d;
    box-shadow:
    #05471100 40px 50px 25px,
    #02140033 0px 25px 25px;
}
.glass{
    transform-style:preserve-3d;
    position:absolute;
    inset:8px;
    background:linear-gradient(#ffffff59,#ffffffd0);;
    border-radius:55px;
    border-top-right-radius:100%;
    border-left:1px solid white;
    border-bottom:1px solid white;
    transition:0.5s ease-in-out;
    
    transform:translate3d(0,0,25px);
}
.logo{
    position:absolute;
    right:0;
    top:0;
    transform-style:preserve-3d;
}
.logo .circle{
    position:absolute;
    aspect-ratio:1;
    border-radius:50%;
    background:#00f9cd33;
    top:0;
    right:0;
    box-shadow:#64646f33 -10px 10px 20px;
    transition:0.5s ease-in-out;
    backdrop-filter:blur(5px);
}
.logo .circle1{
    width:170px;
    transform:translate3d(0,0,20px);
    top:8px;
    right:8px;
    transition-delay:0.0s;
}
.logo .circle2{
    width:140px;
    transform:translate3d(0,0,20px);
    top:10px;
    right:10px;
    transition-delay:0.0s;
}
.logo .circle2{
    width:140px;
    transform:translate3d(0,0,20px);
    top:10px;
    right:10px;
    transition-delay:0.4s;
}
.logo .circle3{
    width:110px;
    transform:translate3d(0,0,60px);
    top:17px;
    right:17px;
    transition-delay:0.8s;
}
.logo .circle4{
    width:80px;
    transform:translate3d(0,0,80px);
    top:23px;
    right:23px;
    transition-delay:1.2s;
}
.logo .circle5{
    width:50px;
    transform:translate3d(0,0,100px);
    top:30px;
    right:30px;
    transition-delay:1.6s;
    
    display:flex;
    justify-content:center;
    align-items:center;
    color: var(--prime_color);
}
.content{
    padding:130px 60px 0 30px;
}
.content h1{
    color:var(--prime_color);
    font-weight:900;
    font-size:20px;
    font-family:'Trebuchet MS','Lucida Sans Unicode','Lucida Grande','Lucida Sans',Arial,sans-serif;
}
.content p{
    margin-top:10px;
    color:#00a15d;
    font-size:15px;
}
.footer{
    transform-style:preserve-3d;
    position:absolute;
    bottom:20px;
    left:30px;
    right:30px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.footer .link{
    transition:0.2s ease-in-out;
    font-size:14px;
    color:#00c37b;
    cursor:pointer;
}
.footer .link:hover{
    transform:translate3d(0,0,10px);
    color:var(--prime_color);
}
.footer .social{
    transform-style:preserve-3d;
    display:flex;
    gap:10px;
}
.footer .social .social_icons{
    display:inline-block;
    width:30px;
    height:30px;
    background:#fff;
    color:var(--prime_color);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:#05471180 7px 7px 5px;
    transition:0.5s;
}
.footer .social .social_icons:nth-child(1){
    transition:0.2s ease-in-out 0.2s;
}
.footer .social .social_icons:nth-child(2){
    transition:0.2s ease-in-out 0.4s;
}
.footer .social .social_icons:nth-child(3){
    transition:0.2s ease-in-out 0.6s;
}

/*Hover Effect*/

.container:hover .card{
    transform:rotate3d(1,1,0,30deg);
    box-shadow:
    #0547110d 30px 50px 25px,
    #05471111 0px 25px 30px;
}
.container:hover .card .footer .social .social_icons{
    transform:translate3d(0,0,50px);
    box-shadow:#05471133 -5px 20px 10px;
}
.container:hover .card .logo .circle2{
    transform:translate3d(0,0,60px);
}
.container:hover .card .logo .circle3{
    transform:translate3d(0,0,80px);
}
.container:hover .card .logo .circle4{
    transform:translate3d(0,0,100px);
}
.container:hover .card .logo .circle5{
    transform:translate3d(0,0,120px);
}

/*
 All the credits to: https://www.youtube.com/watch?v=_Kssd3Pf7GY
*/