Following is the code to style social media buttons with CSS −
Example
<!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>Output
The above code will produce the following output −
On hovering above any of the icons −
