CSS를 이용한 Button 만들기

프로그래밍|2013.01.29 20:50
CSS를 이용한 Button 만들기

요즘에 한 창 앱을 공부를 하고 있습니다. 직접 만들고 있는 중입니다. JSP를 통해 만들고 있는데 버튼을 어떻게 만들어야 될지 많이 고민을 하였습니다. 자료를 계속 계속 찾던 도중에 괜찮은 방법이 없나 생각을 통해 CSS를 이용하여서 버튼을 만들자는 생각을 해보았습니다. 인터넷에서 찾은 자료를 토대로 약간 변형을 하여서 알려드리겠습니다.

버튼을 만드는 것은 크게 어렵지 않습니다. 단순한 버튼만 만든다고 가정을 하면 버튼 태그를 쓰면 됩니다. <input type = "button" value = "버튼"></input>이나 <button type = "button">버튼</button> 이런식으로 태그를 작성을 하여도 기본적인 버튼은 만들어집니다. 문제는 버튼을 어떻게 디자인을 해야될지 그게 큰 관건이네요.


보통 포토샵으로 버튼 디자인을 하여도 되지만 포토샵을 잘 다루시지 못하시는 분은 CSS를 통해서 디자인을 하셔도 무방합니다. 크게 문제는 없습니다. 오히려 예쁜 버튼을 만드실 수 있습니다. CSS의 기본적은 버튼 소스를 공개해드리겠습니다. 약간은 어렵더라도 한 번 소스를 작성해보시고 Tomcat으로 구동을 해보시길 바랍니다. 간단하게 작성을 할테니 확장자 파일을 html로 저장을 하시고 바로 열어보세요.

 ※ CSS를 이용한 Button 만들기 연관글

안드로이드 TextView에 html 적용하기

인터넷 익스플로러 보다 빠른 크롬

HTML을 처음 접할 때 기억을 되새기다

하루 한 시간, HTML5 모바일 앱 프로그래밍


button.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><meta http-equiv="Content-Type" content="text/html;  charset="UTF-8"><title></title>
<style type = "text/css">
#button1{
background: #75BC00;
padding:7px 30px 7px 30px;
font-size:15px;
font-weight:bold;
color:#000000;
text-align:center;
border:solid 1px #99E000;
background: -moz-linear-gradient(0%, 100%, 90deg, #75BC00, #ffffff);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#75BC00));
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-bottom-color:#3F8600;
text-shadow:0 -1px 0 #3F8600;
}

#button2{
background: #2e8ce3;
padding:7px 30px 7px 30px;
font-size:15px;
font-weight:bold;
color:#000000;
text-align:center;
border:solid 1px #73c8f0;
background: -moz-linear-gradient(0%, 100%, 90deg, #2e8ce3, #ffffff);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#2e8ce3));
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-bottom-color:#196ebb;
text-shadow:0 -1px 0 #196ebb;
}
#button3{
background: #F361DC;
padding:7px 30px 7px 30px;
font-size:15px;
font-weight:bold;
color:#000000;
text-align:center;
border:solid 1px #FFB2D9;
background: -moz-linear-gradient(0%, 100%, 90deg, #F361DC, #ffffff);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#F361DC));
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-bottom-color:#99004C;
text-shadow:0 -1px 0 #99004C;
}
</style>
</head>
<body>
 <button type="button"  id = "button1">버튼</button>
 <button type="button"  id = "button2">버튼</button>
 <button type="button"  id = "button3">버튼</button>
</body>
</html>
 
위에 처럼 그대로 작성을 하시고 button.html로 저장을 하시고 바로 열어보시길 바래요.^^


문제는 크롬이나 파이어폭스에서 결과를 보아야됩니다. 아니면 익스플로러 버전을 9.0정도 되면 보실 수 있으실 거에요. 8.0에서는 약간 지원이 안되는 것도 있습니다. 단점이긴 하네요. 하지만 모바일웹에서는 제대로 나오더군요. 오늘 직접 실험을 해보았습니다.
처음에 약간 어렵기도 하지만 해보면 해볼 수록 매력에 빠져드네요.^^! 배움에는 끝이 없다고 하네요. 저도 CSS를 접한지 얼마 되지 않았습니다. 대략 1년 동안 학교에서 배우긴 했는데 실제로 만들어보기는 처음이네요. CSS에 관련된 것들도 계속 포스팅을 해나갈 예정입니다.

아직 전문 개발자는 아니지만 열심히 하겠습니다.^^!! 파이팅~!

댓글(3)