@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } html,body{ max-width: 100%; overflow-x: hidden; width: 100%; place-items: center; background: linear-gradient(315deg, #000000 100%, #d7e1ec 74%); } .wrapper .button{ display: inline-block; height: 60px; width: 60px; float: none; margin: 0 190px; overflow: hidden; background: #fff; border-radius: 50px; cursor: pointer; box-shadow: 0px 10px 10px rgba(0,0,0,0.1); transition: all 0.3s ease-out; } .wrapper .button:hover{ width: 200px; } .wrapper .button .icon{ display: inline-block; height: 60px; width: 60px; text-align: center; border-radius: 50px; box-sizing: border-box; line-height: 60px; transition: all 0.3s ease-out; } .wrapper .button:nth-child(1):hover .icon{ background: #000000; } .wrapper .button:nth-child(2):hover .icon{ background: #000000; } .wrapper .button:nth-child(3):hover .icon{ background: #000000; } .wrapper .button:nth-child(4):hover .icon{ background: #000000; } .wrapper .button:nth-child(5):hover .icon{ background: #000000; } .wrapper .button .icon i{ font-size: 25px; line-height: 60px; transition: all 0.3s ease-out; } .wrapper .button:hover .icon i{ color: #fff; } .wrapper .button span{ font-size: 20px; font-weight: 500; line-height: 60px; margin-left: 10px; transition: all 0.3s ease-out; } .wrapper .button:nth-child(1) span{ color: #000000; } .wrapper .button:nth-child(2) span{ color: #000000; } .wrapper .button:nth-child(3) span{ color: #000000; } .wrapper .button:nth-child(4) span{ color: #000000; } .wrapper .button:nth-child(5) span{ color: #000000; }