sns 버튼 코딩소스

sns 버튼 코딩소스

 

평상시에는 그레이 버튼에서  

버튼에 마우스을 올리면 색상이 있는 버튼이 보이도록 처리했다.

 

 

방법1

텍스트로 코딩후 css로 백그라운 색상과 형태를 변경하는 방법 (일반적 코딩방법)

 

 

방법2  : htm l 코드내에 onmouseover   와 onmouseout  으로 코딩할 수 있다. 

이미지 제작하여 코딩한다.

 

 <ul class="sns">
	<li><a href="#"><img src="images/tw_g.png" alt="트위터" width="50" height="50" onmouseover="src='images/tw.png'" onmouseout="src='images/tw_g.png'"></a></li>
	<li><a href="#"><img src="images/fb_g.png" alt="페이스북" width="50" height="50" onmouseover="src='images/fb.png'" onmouseout="src='images/fb_g.png'"></a></li>
	<li><a href="#"><img src="images/ins_g.png" alt="인스타그램" width="50" height="50" onmouseover="src='images/ins.png'" onmouseout="src='images/ins_g.png'"></a></li>
</ul>

 

 

눈sns 코딩 -마우스 올리면 색상이 변하게 된다.

 

 

 

---

 

 

방법3 : html 코드는 단순하게 코딩하고 css 만 사용하여 코딩할 수 있다.

해당 이미지의 그레이톤 버튼에서  hover시 해당이미지 나오도록 한다. 

이미지를 제작하여 사용한다.. 

 

html코딩

<ul class="sns">
    <li><a href="#"><span class="bt1"></span></a></li>
    <li><a href="#"><span class="bt2"></span></a></li>
    <li><a href="#"><span class="bt3"></span></a></li>
</ul>

 

 

 

css 코딩

span.bt1 {
    display: block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: url("../images/tw_g.png") no-repeat 50% 50%;
}

span.bt1:hover {
    background: url("../images/tw.png") no-repeat 50% 50%;
    line-height: 50px;
    background-size: 50px;
}


span.bt2 {
    display: block;
    width: 50px;
    height: 50px;
    background: url("../images/fb_g.png") no-repeat 50% 50%;

}

span.bt2:hover {
    background: url("../images/fb.png") no-repeat 50% 50%;
    background-size: 50px;

}

span.bt3 {
    display: block;
    width: 50px;
    height: 50px;
    background: url("../images/ins_g.png") no-repeat 50% 50%;

}

span.bt3:hover {
    background: url("../images/ins.png") no-repeat 50% 50%;
    background-size: 50px;
}

 

 

 

 

방법4 : 

css 에서 filter 를 사용하여 그레이이미지 형태를 만들 수도 있다.

그레이 이미지는 filter  사용하여 나오도록 한다.

 

footer ul.sns {
    width: 350px;
    float: left;
    height: 100px;
    padding-left: 45px;
    box-sizing: border-box;
}
footer ul.sns li{
    float: left;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin-left: 30px;
    margin-top: 25px;
}

footer ul.sns li a{
    display: block;
}
footer ul.sns li:hover{
}

span.bt1 {
    display: block;
    width: 50px;
    height: 50px;
    background: url(../images/tw.png) no-repeat 50% 50%;
    filter: grayscale(100%);
    background-size: 50px;
    
}

span.bt1:hover{
    filter: grayscale(0%);
    background-size: 50px;
}

span.bt2 {
    display: block;
    width: 50px;
    height: 50px;
    background: url(../images/fb.png) no-repeat 50% 50%;
    filter: grayscale(100%);
    background-size: 50px;
}

span.bt2:hover{
    filter: grayscale(0%);
    background-size: 50px;
}

span.bt3 {
    display: block;
    width: 50px;
    height: 50px;
    background: url(../images/ins.png) no-repeat 50% 50%;
    filter: grayscale(100%);
    background-size: 50px;
    
}

span.bt3:hover{
    filter: grayscale(0%);
    background-size: 50px;
}