CSS의 놀라운 소셜 아이콘 호버 효과

4863 단어 csswebtutorial
안녕하세요 Devs, 오늘 이 게시물에서는 HTML 및 CSS를 사용하여 Amazing Social Icons Hover Effect in CSS을 만드는 방법을 배웁니다. 이를 만들기 위해 간단한 CSS 및 Font Awesome을 사용할 것입니다. 저희 블로그를 즐기시기 바랍니다.

소셜 아이콘은 저희 웹사이트에서 매우 중요한 부분입니다. 이를 통해 사용자는 소셜 미디어 사이트에서 콘텐츠를 빠르게 공유할 수 있으므로 클릭 한 번으로 몇 초 만에 사용자를 확장할 수 있습니다.

구현해야 할 작은 기능이기도 합니다. 창의력을 발휘하고 사용자에게 고유한 경험을 추가하는 방식으로 소셜 아이콘을 대화형으로 만들 수 있습니다.

데모



Click 데모 보기!

CSS에서 소셜 아이콘 호버 효과를 만들기 위해 Font Awesome을 사용하여 아이콘을 만들었습니다. 따라서 <head> 태그에 Font Awesome 링크가 필요합니다. 매우 간단합니다. Font Awesome 사이트에 로그인하기만 하면 키트 코드가 제공됩니다.

CSS 및 HTML의 소셜 아이콘 호버 효과(소스 코드)



HTML 코드

<!DOCTYPE html>
<html lang="en">
    <head>
         <title>Making Animations</title>
        <link rel="stylesheet" href="Animations.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-                     awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous"/>
    </head>

    <body> 

        <div class="wrapper">
            <div class="button">
                <div class="icon">
                    <a class="fab fa-facebook-f"></a>
                </div>
                <span>Facebook</span>
            </div>
            <div class="button">
                <div class="icon">
                    <a class="fab fa-instagram"></a>   
                </div>
                <span>Instagram</span>
            </div>

            <div class="button">
                <div class="icon">
                    <a class="fab fa-twitter"></a>
                </div>
                <span>Twitter</span>
            </div>

            <div class="button">
                <div class="icon">
                    <a class="fab fa-youtube"></a>
                </div>
                <span>Youtube</span>
            </div>
        </div> 

    </body>
</html>


CSS 코드

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
html,body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    background: linear-gradient(315deg, #fff 0%, rgb(245, 245, 245) 74%);
}
.button{
    height: 60px;
    width: 60px;
    background-color: #fff;
    border-radius: 60px;
    cursor: pointer;
    box-shadow: 0 10px 10px rgb(94, 91, 91);
    float: left;
    overflow: hidden;
    transition: all 1s ease-in-out;
}
.button:hover{
    width: 220px;
}

.button:nth-child(1):hover .icon { background: #4267B2;}
.button:nth-child(2):hover .icon { background: #E1306C;}
.button:nth-child(3):hover .icon { background: #1DA1F2;}
.button:nth-child(4):hover .icon { background: #FF0000;}

.button:nth-child(1) span { color: #4267B2;}
.button:nth-child(2) span { color: #E1306C;}
.button:nth-child(3) span { color: #1DA1F2;}
.button:nth-child(4) span { color: #FF0000;}

.button span{
    font-size: 20px;
    font-weight: 500;
    line-height: 60px;
    margin-left: 10px;
}
.button, .icon{
    display: inline-block;
    height: 60px;
    width: 60px;
    text-align: center;
    border-radius: 50px;
}
.button, .icon a{
    font-size: 25px;
    line-height: 60px;
}
.icon{
    float: left;
}


축하합니다! 이제 CSS를 사용하여 호버 효과로 Social icons 을 성공적으로 만들었습니다.

다른 놀라운 CSS 및 Javascript 자습서를 확인하는 것을 잊지 마십시오.
  • Responsive footer design in HTML and CSS
  • Random Password Generator app in Javascript Source code
  • Glassmorphism Login Form using HTML and CSS

    • 건배!
    Débuter avec Angular 14: #3 Réagir à un évenement (comme le clique) avec l'Event 바인딩
    perl의 코드가 된 gif 파일

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage