5 CSS 소셜 미디어 아이콘 호버 효과
데모
아이콘 라이브러리 추가
먼저 아래의 모든 코드에 대해 fontawesome 아이콘 CDN을 HTML
<head>
태그에 추가합니다. cdnjs 웹사이트에서도 받을 수 있습니다.<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
1. 반전 호버 효과가 있는 아이콘
HTML 코드
<ul class="social-icons">
<li>
<a href="#"><i class="fab fa-whatsapp"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-instagram"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-twitter"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-snapchat"></i></a>
</li>
</ul>
CSS 코드
body {
background-color: #111827;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.social-icons {
display: flex;
justify-content: center;
list-style: none;
}
.social-icons li {
margin: 0 10px;
}
.social-icons li a {
font-size: 30px;
height: 70px;
width: 70px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: white;
position: relative;
transition: 0.5s ease;
}
.social-icons li a:hover {
background-image: linear-gradient(45deg, #12c2e9, #c471ed, #f64f59);
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-size: 40px;
}
.social-icons li a::before {
content: '';
position: absolute;
z-index: -1;
height: 70px;
width: 70px;
border-radius: 50%;
background: linear-gradient(45deg, #12c2e9, #c471ed, #f64f59);
transform: scale(1);
transition: 0.5s ease-in-out;
}
.social-icons li a:hover::before {
transform: scale(0);
}
2. 어두운 신형 발광 아이콘
HTML 코드
<div>
<a href="#" class="link">
<i class="fab fa-instagram instagram"></i>
</a>
<a href="#" class="link">
<i class="fab fa-twitter twitter"></i>
</a>
<a href="#" class="link">
<i class="fab fa-whatsapp whatsapp"></i>
</a>
<a href="#" class="link">
<i class="fab fa-linkedin linkedin"></i>
</a>
</div>
CSS 코드
body {
display: flex;
justify-content: center;
padding-top: 20rem;
background: #000;
}
div {
display: flex;
}
.link {
text-decoration: none;
color: #b7b7b7;
margin: 10px;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
background: rgb(28, 28, 28);
border-radius: 10px;
position: relative;
transition: 0.4s;
}
.link:hover {
transform: rotate(45deg);
}
.link::before {
content: " ";
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
background: #373737;
border-radius: 10px;
transition: opasity 0.2s;
}
.link:hover::before {
opacity: 0.4;
}
.link:nth-child(1)::before {
background: #c32aa3;
}
.link:nth-child(2)::before {
background: #1da1f2;
}
.link:nth-child(3)::before {
background: #25d366;
}
.link:nth-child(4)::before {
background: #0a66c2;
}
.link:hover::before {
transform: translate(-4px, -4px);
filter: blur(10px);
}
.link i {
font-size: 1.7em;
transition: all 0.4s;
}
.link:hover i {
color: #c8c8c8;
transform: rotate(-45deg);
}
.link:hover i.instagram {
color: #c32aa3;
}
.link:hover i.twitter {
color: #1da1f2;
}
.link:hover i.whatsapp {
color: #25d366;
}
.link:hover i.linkedin {
color: #0a66ca;
}
3. 플로팅 신형 아이콘
HTML 코드
<ul>
<li><a href="#"><i class="fab fa-facebook"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
</ul>
CSS 코드
body {
margin: 0;
padding: 0;
background: #dedede;
}
ul {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
padding: 0;
display: flex;
}
ul li {
list-style: none;
}
ul li a {
position: relative;
width: 60px;
height: 60px;
display: block;
text-align: center;
margin: 0 10px;
border-radius: 50%;
padding: 6px;
box-sizing: border-box;
text-decoration: none;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);
background: linear-gradient(0deg, #ddd, #fff);
transition: .5s;
}
ul li a:hover {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
text-decoration: none;
}
ul li a .fab {
widht: 100%;
height: 100%;
display: block;
background: linear-gradient(0deg, #fff, #ddd);
border-radius: 50%;
line-height: calc(60px - 12px);
font-size: 24px;
color: #262626;
transition: .5s;
}
ul li:nth-child(1) a:hover .fab {
color: #3b5998;
}
ul li:nth-child(2) a:hover .fab {
color: #00aced;
}
ul li:nth-child(3) a:hover .fab {
color: #dd4b39;
}
ul li:nth-child(4) a:hover .fab {
color: #e4405f;
}
4. 호버가 있는 아이콘 회전
HTML 코드
<ul class="social-icons">
<li>
<a href="#"><i class="fab fa-instagram"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-twitter"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-linkedin"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-whatsapp"></i></a>
</li>
</ul>
CSS 코드
* {
font-family: 'Poppins', sans-serif;
}
body {
background-color: #111827;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.social-icons {
padding: 0;
list-style: none;
display: flex;
}
.social-icons li {
margin: 0 20px;
}
.social-icons li a {
border: 3px solid deepskyblue;
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
color: white;
border-radius: 50%;
border-right: none;
border-top: none;
transition: 0.3s ease;
}
.social-icons li a:hover {
border-top: 3px solid;
border-right: 3px solid;
transform: rotate(360deg);
background-color: deepskyblue;
border-color: white;
}
5. 빛나는 효과가 있는 아이콘
HTML 코드
<ul class="social-icons">
<li>
<a href="#" style="color: lawngreen;"><i class="fab fa-whatsapp"></i></a>
</li>
<li>
<a href="#" style="color: deeppink;"><i class="fab fa-instagram"></i></a>
</li>
<li>
<a href="#" style="color: deepskyblue;"><i class="fab fa-twitter"></i></a>
</li>
<li>
<a href="#" style="color: yellow;"><i class="fab fa-snapchat"></i></a>
</li>
</ul>
CSS 코드
body {
background-color: #111827;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.social-icons {
display: flex;
justify-content: center;
list-style: none;
}
.social-icons li {
margin: 0 10px;
}
.social-icons li a {
font-size: 36px;
text-shadow: 0 0 0px;
transition: 0.3s ease;
}
.social-icons li a:hover {
text-shadow: 0 0 10px;
}
Reference
이 문제에 관하여(5 CSS 소셜 미디어 아이콘 호버 효과), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/piyushpatil1243/5-css-social-media-icons-hover-effects-l87텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)