*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif; 
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    ul{
        position: relative;
        display: flex;
        gap: 25px;
        li{
            position: relative;
            list-style: none;
            width: 60px;
            height: 60px;
            background: #ffffff;
            border-radius: 60px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.1);
            transition: 0.5s;
            &:hover{
                width: 180px;
                box-shadow: 0px 10px 25px rgba(0, 0, 0, 0);
                &::before{
                    opacity: 1;
                }
                &::after{
                    opacity: 0.5;
                }
                ion-icon{
                    transform: scale(0);
                    color: #ffffff;
                    transition-delay: 0.25s;
                }
                .title{
                    transform: scale(1);
                    transition-delay: 0.25s;
                }
        }
        &::before{
            content:"";
            position: absolute;
            inset: 0;
            border-radius: 60px;
            background: linear-gradient(45deg,var(--i),var(--j));
            opacity: 0; 
            transition: 0.5s;
        }
        &::after{
            content: "";
            position: absolute;
            top: 10px;
            width: 100%;
            height: 100%;
            border-radius: 60px;
            background: linear-gradient(45deg,var(--i),var(--j));
            transition: 0.5s;
            filter: blur(15px);
            z-index: -1;
            opacity: 0;
        }
        ion-icon{
            color: #777;
            font-size: 1.75em;
            transition: 0.5s;
            transition-delay: 0.25s;
        }
        span{
            position:absolute
        }
        .title{
            color: #fff;
            font-size: 1.1em;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            transform: scale(0);
            transition: 0.5s;
            transition-delay: 0s;
        }
    }