CSS3 버튼
CSS3 버튼(button)
CSS를 이용하면 다양한 모양의 버튼을 여러 방식으로 만들 수 있습니다.
CSS에서 버튼은 <button>태그 뿐만 아니라 <a>태그와 <input>태그로도 만들 수 있습니다.
예제
<button class="btn">button 태그</button>
<a href="#" class="btn">a 태그</a>
<input type="button" value="input 태그" class="btn">
다음 예제는 마우스를 올리면 배경색이 변하는 버튼 예제입니다.
예제
<style>
.btn {
background-color: #87CEEB;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
.btn1:hover, .btn2:hover, .btn3:hover, .btn4:hover {
background-color: #4169E1;
color: white;
}
</style>
위의 예제처럼 transition-duration 속성을 이용하면, 배경색 뿐만 아니라 글자의 색상까지 변경되게 할 수 있습니다.
다음 예제는 그림자 효과를 설정한 버튼 예제입니다.
예제
<style>
.btn {
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
.btn1, .btn2:hover { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); }
</style>
위의 예제처럼 box-shadow 속성을 이용하면, 버튼에 실제와 같은 그림자 효과를 간단히 설정할 수 있습니다.
다음 예제는 버튼을 사용하지 못하도록 설정하는 예제입니다.
위의 예제처럼 disabled 속성을 이용하면, 버튼을 사용하지 못하도록 만들 수 있습니다.
이렇게 사용이 금지된 버튼은 반투명하게 보이게 됩니다.
이때 cursor 속성의 속성값을 not-allowed로 설정하면, 사용이 금지된 버튼을 더욱 그럴싸하게 표현할 수 있습니다.
float 속성을 이용하여 버튼으로 메뉴를 만들 수도 있습니다.
예제
<style>
.btn {
background-color: #87CEEB;
border: solid 1px #00BFFF;
text-decoration: none;
display: inline-block;
cursor: pointer;
float: left;
}
</style>
다양한 형태의 버튼 예제
CSS의 애니메이션(animation) 효과를 이용하면, 버튼에 더욱 다양한 효과를 적용할 수 있습니다.
다음 예제는 마우스를 올리면 버튼의 표시 내용이 바뀌는 예제입니다.
예제
<style>
.btn span {
display: inline-block;
position: relative;
transition: 0.5s;
}
.btn span::after {
content: "▶";
opacity: 0;
transition: 0.5s;
}
.btn:hover span::after {
opacity: 1;
right: 0px;
}
</style>
위의 예제에서 '▶'기호는 ::after 선택자를 이용하여 '버튼'이라는 문자열 바로 뒤에 삽입됩니다.
이때 opacity 속성값을 0으로 설정하여 처음에는 보이지 않습니다.
하지만 마우스를 버튼 위로 올리면, opacity 속성값이 1로 변경되어 눈에 보이게 됩니다.
이때 transition 효과가 실행되며 0.5초 동안 천천히 opacity 속성값이 변경됩니다.
다음 예제는 버튼을 누르면 버튼 위로 다른 색상이 물결처럼 퍼지는 예제입니다.
예제
<style>
.btn {
background-color: orange;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
.btn::after {
content: "";
background-color: #FFD700;
display: block;
opacity: 0;
transition: all 0.8s;
}
.btn:active::after {
opacity: 1;
transition: 0s
}
</style>
위의 예제는 :active 선택자와 ::after 선택자를 이용하여 transition 효과를 설정함으로써 구현하고 있습니다.
다음 예제는 진짜 버튼처럼 누르는 효과를 적용한 버튼 예제입니다.
예제
<style>
.btn {
background-color: orange;
display: inline-block;
border: none;
outline: none;
border-radius: 20px;
box-shadow: 0 9px #B0B0B0;
}
.btn:active {
background-color: #FF8C00;
box-shadow: 0 5px #808080;
transform: translateY(4px);
}
</style>
위의 예제에서는 우선 box-shadow 속성을 이용하여 버튼에 그림자 효과를 설정합니다.
그 후에 사용자가 버튼을 누르면 :active 선택자와 transform 효과를 이용하여 버튼의 위치를 아래로 살짝 이동시킵니다.
이렇게 함으로써 버튼이 진짜로 눌리는 듯한 효과를 줄 수 있게 됩니다.
