CSS3 버튼
CSS3 버튼(button)
CSS를 이용하면 다양한 모양의 버튼을 여러 방식으로 만들 수 있습니다.
CSS에서 버튼은 <button>태그 뿐만 아니라 <a>태그와 <input>태그로도 만들 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS3 Buttons</title>
<style>
.btn {
background-color: #87CEEB;
padding: 15px 30px;
margin: 2px;
border: none;
color: black;
text-align: center;
text-decoration: none;
font-size: 16px;
display: inline-block;
cursor: pointer;
}
</style>
</head>
<body>
<h1>다양한 요소로 만드는 버튼</h1>
<h3>기본 버튼</h3>
<button>button 태그</button>
<a href="#">a 태그</a>
<input type="button" value="input 태그">
<h3>CSS로 버튼 스타일 설정</h3>
<button class="btn">button 태그</button>
<a href="#" class="btn">a 태그</a>
<input type="button" value="input 태그" class="btn">
</body>
</html>
버튼을 누르면 배경색이 변하는 버튼
다음 예제는 마우스를 올리면 배경색이 변하는 버튼 예제입니다.
See the Pen RwWWrrL by yunjunshin (@yjshin) on CodePen.
위의 예제처럼 transition-duration 속성을 이용하면, 배경색 뿐만 아니라 글자의 색상까지 변경되게 할 수 있습니다.
그림자 효과 버튼
다음 예제는 그림자 효과를 설정한 버튼 예제입니다.
See the Pen abvvdZN by yunjunshin (@yjshin) on CodePen.
버튼 비활성화
다음 예제는 버튼을 사용하지 못하도록 설정하는 예제입니다.
See the Pen vYNNLKe by yunjunshin (@yjshin) on CodePen.
위의 예제처럼 disabled 속성을 이용하면, 버튼을 사용하지 못하도록 만들 수 있습니다.
이렇게 사용이 금지된 버튼은 반투명하게 보이게 됩니다.
이때 cursor 속성의 속성값을 not-allowed로 설정하면, 사용이 금지된 버튼을 더욱 그럴싸하게 표현할 수 있습니다.
float 매뉴 만들기(float 버튼 만들기)
float 속성을 이용하여 버튼으로 메뉴를 만들 수도 있습니다.
See the Pen QWjjyEY by yunjunshin (@yjshin) on CodePen.
다양한 형태의 버튼 예제
CSS의 애니메이션(animation) 효과를 이용하면, 버튼에 더욱 다양한 효과를 적용할 수 있습니다.
다음 예제는 마우스를 올리면 버튼의 표시 내용이 바뀌는 예제입니다.
See the Pen LYppGRx by yunjunshin (@yjshin) on CodePen.
위의 예제에서 '▶'기호는 ::after 선택자를 이용하여 '버튼'이라는 문자열 바로 뒤에 삽입됩니다.
이때 opacity 속성값을 0으로 설정하여 처음에는 보이지 않습니다.
하지만 마우스를 버튼 위로 올리면, opacity 속성값이 1로 변경되어 눈에 보이게 됩니다.
이때 transition 효과가 실행되며 0.5초 동안 천천히 opacity 속성값이 변경됩니다.
물결처럼 퍼지는 버튼 만들기
다음 예제는 버튼을 누르면 버튼 위로 다른 색상이 물결처럼 퍼지는 예제입니다.
See the Pen XWmmXNb by yunjunshin (@yjshin) on CodePen.
위의 예제는 :active 선택자와 ::after 선택자를 이용하여 transition 효과를 설정함으로써 구현하고 있습니다
클릭하면 들어가는 진짜 버튼과 같은 버튼 만들기
다음 예제는 진짜 버튼처럼 누르는 효과를 적용한 버튼 예제입니다.
See the Pen mdeeVOp by yunjunshin (@yjshin) on CodePen.
위의 예제에서는 우선 box-shadow 속성을 이용하여 버튼에 그림자 효과를 설정합니다.
그 후에 사용자가 버튼을 누르면 :active 선택자와 transform 효과를 이용하여 버튼의 위치를 아래로 살짝 이동시킵니다.
이렇게 함으로써 버튼이 진짜로 눌리는 듯한 효과를 줄 수 있게 됩니다.
[출처] TCPCSCHOOL.com
'IT > 소프트웨어' 카테고리의 다른 글
| CSS3 다중 칼럼 Multi-column) 레이아웃 (0) | 2020.04.14 |
|---|---|
| CSS3 사용자 인터페이스 - resize, outline-offset, box-sizing (0) | 2020.04.14 |
| CSS3 글꼴 (0) | 2020.04.13 |
| 티스토리에 코드펜 CodePen 소스 코드 올리는 방법 (6) | 2020.04.09 |
| CSS3 텍스트 (0) | 2020.04.09 |
댓글