![[2021/12/27]국비지원 CSS3 8-(1) 과제1 : 버튼 클론](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbPzuPt%2FbtrsaRPD5rz%2FAAAAAAAAAAAAAAAAAAAAAD80S04IAEvdVXSWObOzkxEC4JQoCWkT1DiK1gMABujd%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3D459NBehzVOOPMigyGGe9ZfbRNzo%253D)
버튼 클론 코딩
주제 : psuedo-class :active 사용하기
psuedo-class
- :active : 버튼을 클릭하고 있는 동안에만 작동하도록 하는 기능
- 이 기능에서 버튼이 눌려 있고, 눌렸을 때 나타난 창이 유지되도록 하려면 javascript,
onclick 명령이 필요하다.
- 이 기능에서 버튼이 눌려 있고, 눌렸을 때 나타난 창이 유지되도록 하려면 javascript,
원본 이미지
작업내용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>버튼예제</title>
<style type="text/css">
button{font-size: 16px;font-weight:bold;font-family:Gulim,"굴림", serif;display:block;
margin:10px 0px 30px 30px;padding:0px; border-radius:8px;border:none;text-shadow: 0 -1px 2px #666;}
button:active{position:relative;left:1px;top:1px;}
a{display:block;padding:10px 20px;border-radius:8px;box-shadow: 0px 2px 2px gray;text-decoration: none;color: #fff;}
a:hover{display:block;padding:10px 20px;border-radius:8px;text-decoration: none;}
a.blue{background-color: #2cadc0;border-bottom:2px solid #1b8592;}
a.blue:hover{background-color: #1b8592;}
a.red{background-color:#e33101;border-bottom:2px solid #b42200;}
a.red:hover{background-color:#b42200;}
a.yellow{background-color:#ffb514;border-bottom:2px solid #bf8a08;}
a.yellow:hover{background-color:#bf8a08;}
</style>
</head>
<body>
<button><a href="#" class="blue"> Blue Button »</a></button>
<button><a href="#" class="red"> Red Button »</a></button>
<button><a href="#" class="yellow"> Yellow Button »</a></button>
</body>
</html>
결과물
012