CSSでソーシャルメディアボタンのスタイルを設定するにはどうすればよいですか？

以下は、CSSを使用してソーシャルメディアボタンのスタイルを設定するためのコードです-

例

<!DOCTYPE html>
<html>
<head>
<link
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous"
/>
<style>
button {
   margin: 0px;
   border-radius: 50%;
   width: 120px;
   height: 120px;
   border: none;
   padding: 15px;
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   font-weight: bold;
   font-size: 40px;
   border:1px solid black;
}
button:nth-of-type(1){
   margin-left: 40%;
}
button:hover {
   background: black;
   box-shadow: 5px 10px 18px rgb(20, 20, 20);
}
</style>
</head>
<body>
<h1 style="text-align: center;">Social Media Buttons Example</h1>
<button><i class="fa fa-facebook-f" style="color:#3B5998"></i></button>
<button><i class="fa fa-hashtag" style="color:#55ACEE"></i></button>
<button><i class="fa fa-linkedin" style="color:#007bb5"></i></button>
</body>
</html>