스타일 시트 CSS 모서리 기능 이용해서 버튼 만들기

스타일시트 CSS

스타일 시트 CSS 모서리 기능 이용해서 버튼 만들기

 

환경: CSS

 

이번에는 링크가 걸린 텍스트를 디자인한 이미지처럼 만드는 방법에 대해 알아 보겠습니다. 이제는 CSS 만으로도 충분히 괜찮은 버튼을 만들 수 있습니다. CSS3 부터는 그라데이션까지 줄 수 있기 때문에 좀더 퀄리티 있는 버튼을 만드는 것이 가능합니다.

CSS 로 버튼을 만드는 과정은 다음과 같습니다.

 

l  a 태그 박스 만들기

l  모서리 둥글게 만들기 : border-radius 속성

l  그림자 적용하기 : box-shadow 속성

l  그라데이션 적용하기 : linear-gradient 속성

 

첫 번째는 <a> 태그에 버튼명으로 사용할 텍스트를 넣고 사각형 박스를 만듭니다. 일반적인 박스 모양입니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>정렬</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	
	#button1 {
		width: 300px;
		margin: 10px;
		padding: 10px;
		border: 1px solid;
		background-color: #eca86f;
		text-align: center;
	}
	
	#button1 a {
		color: white;
		display: inline-block;
		padding: 5px 10px;
		text-decoration: none;
		font-weight: bold;
		margin: 3px;
		background: #000099;
	}
</style>
</head>
<body>
	<div id="button1">
		<a href="#">next</a> <a href="#">after</a>
	</div>
</body>
</html>

 

스타일 시트 CSS 모서리 기능 이용해서 버튼 만들기

 

그리고 버튼이기 때문에 마우스로 버튼을 가리켰을 때 색상이 변경되도록 가상 선택자 hover 에 배경색을 지정하였습니다. hover a 태그에서 마우스 오브 이벤트가 발생했을 때 적용이 됩니다. 아래 그림처럼 색상이 바뀌었죠.

 

#button1 a:hover{

background: #7a7614;

}

스타일 시트 CSS 모서리 기능 이용해서 버튼 만들기

 

¤ 모서리 둥글게 처리하기

 

다음은 모서리를 둥글게 하기 위해서 border-radius 속성을 사용하였습니다. 5px 이면 반지름이 5인 원이 4개의 귀퉁이에 모두 적용이 됩니다. border-radius 아래에 소스는 다른 브라우저의 호환을 위한 것입니다. 앞에 접두사로 –moz- –webkit- 을 붙였습니다. –moz- 은 파이어폭스, –webkit- 는 크롬, 사파리를 위한 접두사 입니다.

 

#button1 a{

    border-radius: 5px;

    -moz-border-radius: 5px;

    -webkit-border-radius: 5px;

}

스타일 시트 CSS 모서리 기능 이용해서 버튼 만들기

 

¤ 그림자 추가하기

 

세 번째는 그림자를 추가하는 것입니다. box-shadow 속성을 사용하였으며 그림자의 크기가 가로 2px, 세로 2px 입니다. 그리고 그림자의 흐림 거리는 4px 입니다.

 

#button1 a{

    box-shadow: 2px 2px 4px #999999;

-moz-box-shadow: 2px 2px 4px #999999;

    -webkit-box-shadow: 2px 2px 4px #999999;

}

스타일 시트 CSS 모서리 기능 이용해서 버튼 만들기

 

¤ 버튼에 그라데이션 주기

 

마지막으로 그라데이션을 주었습니다. 그라데이션을 주게 되면 버튼에 입체감이 생기죠. 그라데이션을 주는 방법은 투명 이미지를 이용하는 방법과 CSS3 에서 추가된 linear-gradient 을 이용하는 것입니다. “to bottom” 은 두 번째 인수로 넘긴 색상을 아래에서 부터 세 번째 넘긴 색상으로 그라데이션을 만들라는 명령어 입니다.

 

#button1 a{

    background: linear-gradient(to bottom, #375094, #000099 );

}

 

아래 소스는 지금까지 CSS 를 적용한 전체 소스 입니다. 실행한 결과 이미지를 보시면 버튼 이미지 같죠. 이 정도면 충분히 버튼으로 사용할 만 하다고 생각합니다. 여러분도 좀더 수정해서 더 멋진 버튼을 만들어 보시기 바랍니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>정렬</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	
	#button1 {
		width: 300px;
		margin: 10px;
		padding: 10px;
		border: 1px solid;
		background-color: #eca86f;
		text-align: center;
	}
	
	#button1 a {
		color: white;
		display: inline-block;
		padding: 5px 10px;
		text-decoration: none;
		font-weight: bold;
		margin: 3px;
		background: #000099;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		box-shadow: 2px 2px 4px #999999;
		-moz-box-shadow: 2px 2px 4px #999999;
		-webkit-box-shadow: 2px 2px 4px #999999;
		background: linear-gradient(to bottom, #375094, #000099);
	}
	
	#button1 a:hover {
		background: #7a7614;
	}
</style>
</head>
<body>
	<div id="button1">
		<a href="#">next</a> <a href="#">after</a>
	</div>
</body>
</html>

스타일 시트 CSS 모서리 기능 이용해서 버튼 만들기


저작자 표시 비영리 변경 금지
신고
Posted by 녹두장군