이 포스트에서는 CSS로 롤오버 버튼을 만드는 방법을 포스팅합니다.
예전에는 롤오버 버튼(마우스를 대면 모양이 바뀌는 버튼)을 만들려면 보통의 버튼 이미지와 롤오버 버튼 이미지를 준비해 놓고 자바스크립트를 써서 마우스를 대면 롤오버 버튼 이미지로 변하게 하는 방식을 사용했습니다.
하지만 CSS를 이용하면 간단한 텍스트 버튼의 경우는 자바스크립트 없이 CSS만 가지고도 롤오버 버튼을 만들 수 있습니다. 이것은 CSS를 이용하여 링크에 마우스를 댔을 때 모양이 변하게 하는 기법을 활용하면 간단합니다. 다음 코드를 봅시다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>CSS Rollover button sample</title>
<style type="text/css">
/* Remove underline */
a:link, a:visited, a:active, a:hover { text-decoration: none; }
/* Basic type */
.red_button, .skyblue_button, .blue_button {
display: inline-block;
padding: 4px 4px 4px 4px;
line-height: 20px;
font-size: 16px;
text-align: center;
width: 150px;
border: 1px solid;
}
/* Colors */
.red_button { border: 1px solid #ea4335; color: #ea4335; }
.red_button:hover { background-color: #ea4335; color: #ffffff; }
.skyblue_button { border: 1px solid #20b8ff; color: #20b8ff; }
.skyblue_button:hover { background-color: #20b8ff; color: #ffffff; }
.blue_button { border: 1px solid #4a6ea9; color: #4a6ea9; }
.blue_button:hover { background-color: #4a6ea9; color: #ffffff; }
</style>
</head>
<body>
<p><a class="red_button" href="https://www.google.com/" target="_blank">Google</a></p>
<p><a class="skyblue_button" href="https://twitter.com/" target="_blank">Twitter</a></p>
<p><a class="blue_button" href="https://www.facebook.com/" target="_blank">Facebook</a></p>
</body>
</html>
일단 10번 줄은 링크의 밑줄을 제거하는 CSS입니다. 그리고 12번 줄부터 20번 줄까지는 버튼의 모양을 만들기 위한 CSS입니다.
22번 줄은 빨간 버튼에 마우스를 대지 않았을 때 테두리와 글자색을 빨강으로 하고, 23번 줄은 빨간 버튼에 마우스를 댔을 때 바탕색을 빨강으로 하면서 글자색을 하양으로 하는 코드입니다. 24번 줄부터 27번 줄까지는 하늘색과 파랑에 대해 같은 방법으로 지정하는 코드입니다.
이를 실행하면,
이렇게 나옵니다. 마우스를 대 보면 롤오버 효과가 작동하는 것을 확인할 수 있습니다.
이와 같이 CSS로 간단한 롤오버 버튼을 만들 수 있습니다.
1개의 댓글이 있습니다.