Create a Tooltip Button Animation using HTML and CSS

/* index.css*/
@import url(
'https://fonts.googleapis.com/css2?family=Poppins&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #2a452b;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-family: 'Poppins', sans-serif;
}

.box {
    position: relative;
    cursor: pointer;
    transition: all 0.9s;
    font-size: 17px;
}

.box1 {
    position: absolute;
    top: 0;
    transform: translateX(-60px);
    padding: 10px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.7s;
    border-radius: 5px 40px 5px;
    border: 2px solid #fff;
    box-shadow: rgba(241, 245, 241, 0.25) 0px 30px 60px -12px inset,
                rgba(242, 238, 238, 0.3) 0px 18px 36px -18px inset;
}

.box2 {
    background: green;
    border-radius: 5px 40px 5px;
    padding: 10px;
    border: 1px solid rgb(221, 228, 232);
}

.box:hover .box1 {
    top: -150px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.layer {
    width: 55px;
    height: 55px;
    transition: transform 0.9s;
}

.icon:hover .layer {
    transform: rotate(-25deg) skew(10deg);
}

.layer span {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border: 1px solid #8fc681;
    border-radius: 10px;
    transition: all 0.9s;
}

.layer span,
.text11 {
    color: rgb(163, 213, 163);
    border-color: #a4c9a3;
    font-size: 30px;
    font-weight: 900;
}

.icon:hover.layer span {
    box-shadow: -1px 1px 3px #2fbc2f;
}

.icon .text11 {
    position: absolute;
    left: 50%;
    opacity: 0;
    font-weight: 500;
    transform: translateX(-50%);
    transition: bottom 0.8s ease, opacity 0.8s ease;
}

.icon:hover .text11 {
    bottom: -55px;
    opacity: 1;
}

.icon:hover .layer span:nth-child(1) {
    opacity: 0.2;
}

.icon:hover .layer span:nth-child(2) {
    opacity: 0.4;
    transform: translate(4px, -4px);
}

.icon:hover .layer span:nth-child(3) {
    opacity: 0.6;
    transform: translate(8px, -8px);
}

.icon:hover .layer span:nth-child(4) {
    opacity: 0.8;
    transform: translate(12px, -12px);
}

.icon:hover .layer span:nth-child(5) {
    opacity: 1;
    transform: translate(17px, -17px);
}

.layer span.fab {
    font-size: 30px;
    line-height: 64px;
    text-align: center;
    fill: #1da1f2;
    background: #000;
}

.box3 {
    display: flex;
    gap: 6px;
}

.img {
    width: 70px;
    height: 50px;
    font-size: 25px;
    font-weight: 700;
    border: 2px solid #204410;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.name {
    font-size: 17px;
    font-weight: 700;
    color: rgb(120, 222, 87);
}

h1,
h3 {
    text-align: center;
    color: aliceblue;
}

.details {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 0;
    color: #fff;
}

.about {
    color: #ccc;
    padding-top: 5px;
}

.follow1 {
    color: aliceblue;
    align-self: center;
    position: absolute;
    bottom: 15vh;
}

.follow2 {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 2vh;
}

.followtext {
    color: aliceblue;
    font-size: 30px;
    text-align: center;
}

.icons_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10vh;
}

i {
    color: aliceblue;
    font-size: 30px;
    transition: 0.3s ease;

}

i:hover {
    color: rgb(191, 232, 200);
    scale: 1.5;
}