@import url('https://fonts.googleapis.com/css2?fami1y=Poppins:wght@300;400;500;600;700;800;900&display=swap');
/**{*/
/*    margin: 0;*/
/*    padding: 0;*/
/*    box-sizing: border-box;*/
/*    font-family: 'Poppins',sans-serif;*/
/*}*/
/*body{*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    min-height: 100vh;*/
/*}*/
.but-c-y{
    position: relative;
    display: flex;
    /*background: red;*/
    align-items: center;
    justify-content: center;
    /*间隙25像素*/
    gap: 25px;
}

.but-c-y li:first-child{
margin-left: 20px;

}
/*第一层显示图标*/
.button-y{
    position: relative;
    list-style: none;
    width: 45px;
    height: 45px;
    background: #fff;
    /*background: #5bc0de;*/
    border-radius: 60px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    /*过度*/
    transition: 0.5s;
}
.button-y:hover{
    /*鼠标移上宽度变108 */
    width: 108px;
    box-shadow: 0 10px 25px rgba(0,0,0,0);

}
.button-y a:hover{background: none}
.button-y a{
    display: block;
}

/*-------------------------------按钮的背景颜色*/
.button-y::before{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 15px;
    /*linear-gradient过度函数*/
    background: linear-gradient(45deg,var(--i),var(--j));
    /*不透明*/
    opacity: 0;
    /*过度*/
    transition: 0.5s;
}
/*li到下层显示before伪元素*/
.button-y:hover::before{
    opacity: 1;
}

/*做阴影效果*/
.button-y::after{
    content: '';
    position: absolute;
    top: 10px;
    width: 100%;
    height: 100%;
    border-radius: 60px;
    background: linear-gradient(45deg,var(--i),var(--j));
    /*background: red;*/
    transition: 0.5s;
    filter: blur(15px);
    z-index: -1;
    opacity: 0.5;

}

.button-y:hover::after{
    opacity: 1;}

/*ul li 下图标元素*/
.button-y ion-icon{
    color: #777;
    font-size: 1.6em;
    /*background: red;*/
    transition: 0.5s;
    transition-delay: 0.25s;
}

.button-y:hover ion-icon{
    /*缩放 0 隐藏图标*/
    transform: scale(0);
    color: #fff;
    transition-delay: 0s;
}
.button-y span{
    position: absolute;
}
.button-y .title{
    color: #fff;
    /*--------------【文字】大小*/
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transform: scale(0);
    transition: 0.5s;
    transition-delay: 0s;
}
/*鼠标移上显示文字1、0隐藏 */
.button-y:hover .title{
    transform: scale(1);
    /*等0.25秒再显示文字*/
    transition-delay: 0.25s;
}