@import url('https //fonts.googleapis.com/css2 family=montserrat &display=swap')

*{
    font-family: 'montserrat';
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html, body{
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(315deg, #ffffff 0%, #d7e4ec 74% );
}

.button{
    display: inline-block;
    width: 60px;
    height: 60px;
    background-color: #ffffff;
    border-radius: 50px;
    line-height : 60px;
    text-align: center;
    box-shadow: 0px 10px 10px #000000(0, 0, 0, 0.1);
}

.wrapper .button .icon{
    font-size: 20px;
}
.wrapper .button:hover{
    width: 100px;
    transition: 0.7s;
}
.wrapper .button:nth-child(1):hover .icon{
    color: #426782;
}
.wrapper .button:nth-child(2):hover .icon{
    color: #1da1f2;
}.wrapper .button:nth-child(3):hover .icon{
    color: #e1306c;
}.wrapper .button:nth-child(4):hover .icon{
    color: #f00;
}