* { margin: 0; padding: 0; box-sizing: border-box; } .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; border: 2px solid #000; margin: auto; padding: 0 20px; } .sm { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; margin: auto; padding: 0 20px; display: inline-flex; } .fb { font-size: 30px; padding: 10px 10px; } .fb i { transition: 0.4s; } .fb i:hover { font-size: 35px; color: #0021df; cursor: pointer; transform: rotate(360deg); } .gh { font-size: 30px; padding: 10px 10px; } .gh i { transition: 0.4s; } .gh i:hover { font-size: 35px; color: #000000; cursor: pointer; transform: rotate(360deg); } .yt { font-size: 30px; padding: 10px 10px; } .yt i { transition: 0.4s; } .yt i:hover { font-size: 35px; color: #d30c0c; cursor: pointer; transform: rotate(360deg); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hover SM</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"> <link rel="stylesheet" href="./css/style.css"> </head> <body> <div class="box"> <div class="sm"> <div class="fb"><i class="fab fa-facebook"></i></div> <div class="yt"><i class="fab fa-youtube"></i></div> <div class="gh"><i class="fab fa-github"></i></div> </div> </div> </body> </html>