#6 HTML + CSS로 버튼 만들기(Feat. 마우스 오버) – 웹 코딩 강좌

웹 디자이너를 위한 웹 코딩 강좌 여섯 번째 시간입니다.
오늘은 버튼을 예제로 만들어볼 거에요. HTML과 CSS를 활용해서 어떻게 만드는지 예제를 통해 배워볼 수 있어요. 마우스 오버했을 경우 어떻게 되는지 까지도 디자인을 입혀볼거에요.

예제 파일 : https://drive.google.com/drive/folders/18uQ0gkkF2dkgqK9jKfsTsSBQsJtx4Joa?usp=sharing

*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 제가 사용하는 툴은 비주얼 스튜디오 코드(Visual Studio Code)를 사용하며 여러분이 다른 툴을 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다.

핵심 요약

버튼을 어떻게 만드는지 알아봤습니다.
영상을 보고 따라해보세요 하단에서 코드를 확인해보세요.

HTML 코드

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>버튼 예제</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <button>확인</button>
    </body>
</html>

CSS 코드

button{
	width:120px;
	height: 40px;
	color:#fff;
	background: #004fff;
	font-size: 16px;
	border:none;
	border-radius: 20px;
	box-shadow: 0 4px 16px rgba(0,79,255,0.3);
	transition:0.3s;
	position: absolute;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
}
button:focus {
	outline:0;
}
button:hover{
	background: rgba(0,79,255,0.9);
	cursor: pointer;
	box-shadow: 0 2px 4px rgba(0,79,255,0.6);
}

431