CSS를 활용하면 소셜 미디어 버튼을 손쉽게 스타일링할 수 있습니다. 이 글에서는 Font Awesome 아이콘 라이브러리와 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>주요 CSS 속성 설명
- border-radius: 50% − 사각형 버튼을 완전한 원형으로 만들어 줍니다.
- width / height: 120px − 버튼의 크기를 동일하게 지정하여 균형 잡힌 원형을 유지합니다.
- button:nth-of-type(1) − 첫 번째 버튼에만 margin-left: 40%를 적용해 버튼 그룹을 화면 중앙 쪽으로 정렬합니다.
- :hover 선택자 − 마우스를 올리면 배경이 검정색으로 변경되고 box-shadow로 입체적인 그림자 효과가 추가됩니다.
출력 결과
위 코드를 실행하면 다음과 같은 결과가 나타납니다.
아이콘 위에 마우스를 올리면(hover) 다음과 같이 배경색과 그림자 효과가 적용된 모습을 확인할 수 있습니다.
