어디에서나 바로가기 기능을 사용하실 수 있습니다. 주메뉴 이동은 알트 키 플러스 1 키이고, 부메뉴 이동은 알트 키 플러스 2 키이고, 본문 이동은 알트 키 플러스 3 키입니다. 알트 키 플러스 J 키는 일반모드와 텍스트모드로 전환합니다.

현재위치
  1. HOME
  2. >배우기
  3. > 스타일시트(CSS)

본문 영역

버튼 상세보기

작성자: 관리자 추천: 0  조회: 8844

버튼


버튼은 크기별로 3가지(기본형, large형, small형)로 나뉩니다.
버튼(반응형)으로 쓸 경우, button, a, input 태그가 가능하나, a 태그를 사용하세요. 그냥 모형(미 반응형)으로 사용하실 경우는 span으로 사용하시면 됩니다.
반응형 : 마우스에 반응

아래 버튼 들에 마우스를 가져가 보세요
a 반응 span 미 반응

a 태그 에니메이션

[버튼 태그에 따른 반응보기] 예제소스보기


크기별


기본형 버튼


/* 버튼 */ .button{ display:inline-block;*zoom:1;*display:inline;padding:2px 10px; font-size:10pt;text-align:center;text-decoration:none;white-space:nowrap; background-image:url(http://ultimate.sitenow.co.kr/wp-content/themes/ultimate/images/button-medium-gradient.png);background-repeat:repeat-x; border-width:1px;border-style:solid;outline:none; border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px; box-shadow:0px 1px 2px rgba(0,0,0,.2);-webkit-box-shadow:0px 1px 2px rgba(0,0,0,.2);-moz-box-shadow:0px 1px 2px rgba(0,0,0,.2); } button.button:hover,a.button:hover,input.button:hover{ text-decoration:none;filter:alpha(opacity=90);opacity:0.9;-moz-opacity:0.9;cursor:pointer; } button.button:active,a.button:active,input.button:active{ position:relative;top:1px;text-decoration:none;filter:alpha(opacity=80);opacity:0.8;-moz-opacity:0.8;cursor:pointer; }

버튼은 마우스 오버시(:hover), 투명도 90%로 변화고, 클릭시(:active) 투명도 80%, 1px 다운하여 클릭에 반응하도록 CSS 만으로 설계되었습니다.

CSS 버튼-기본형 속성
NO 색상 버튼 사용코드
1 button <a class="button black">button</a>
2 button <a class="button grey">button</a>
3 button <a class="button light-grey">button</a>
4 button <a class="button light-blue">button</a>
5 button <a class="button yellow">button</a>
6 button <a class="button blue">button</a>
7 button <a class="button gold">button</a>
8 button <a class="button green">button</a>
9 button <a class="button olive-green">button</a>
10 button <a class="button orange">button</a>
11 button <a class="button purple">button</a>
12 button <a class="button red">button</a>
13 button <a class="button turquoiseblue">button</a>
14 button <a class="button violet">button</a>
15 button <a class="button deepblue">button</a>
16 button <a class="button teal">button</a>
17 button <a class="button mauve">button</a>
18 button <a class="button pearl">button</a>
19 button <a class="button steelblue">button</a>
20 button <a class="button coffee">button</a>
21 button <a class="button coral">button</a>
22 button <a class="button crimson">button</a>
23 button <a class="button hotpink">button</a>
24 button <a class="button indianred">button</a>
25 button <a class="button aqua">button</a>

large형 버튼


.large[class*=button]{ padding:5px 20px;font-size:13pt;font-weight:bold; border-radius:7px;-webkit-border-radius:7px;-moz-border-radius:7px; }

CSS 버튼-large형 속성
NO 색상 버튼 사용코드
1 large <a class="button large black">large</a>
2 large <a class="button large grey">large</a>
3 large <a class="button large light-grey">large</a>
4 large <a class="button large light-blue">large</a>
5 large <a class="button large yellow">large</a>
6 large <a class="button large blue">large</a>
7 large <a class="button large gold">large</a>
8 large <a class="button large green">large</a>
9 large <a class="button large olive-green">large</a>
10 large <a class="button large orange">large</a>
11 large <a class="button large purple">large</a>
12 large <a class="button large red">large</a>
13 large <a class="button large turquoiseblue">large</a>
14 large <a class="button large violet">large</a>
15 large <a class="button large deepblue">large</a>
16 large <a class="button large teal">large</a>
17 large <a class="button large mauve">large</a>
18 large <a class="button large pearl">large</a>
19 large <a class="button large steelblue">large</a>
20 large <a class="button large coffee">large</a>
21 large <a class="button large coral">large</a>
22 large <a class="button large crimson">large</a>
23 large <a class="button large hotpink">large</a>
24 large <a class="button large indianred">large</a>
25 large <a class="button large aqua">large</a>

small형 버튼


.small[class*=button]{ padding:0px 5px;font-family:돋움;font-size:8pt; border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px; }

CSS 버튼-small형 속성
NO 색상 버튼 사용코드
1 small <a class="button small black">small</a>
2 small <a class="button small grey">small</a>
3 small <a class="button small light-grey">small</a>
4 small <a class="button small light-blue">small</a>
5 small <a class="button small yellow">small</a>
6 small <a class="button small blue">small</a>
7 small <a class="button small gold">small</a>
8 small <a class="button small green">small</a>
9 small <a class="button small olive-green">small</a>
10 small <a class="button small orange">small</a>
11 small <a class="button small purple">small</a>
12 small <a class="button small red">small</a>
13 small <a class="button small turquoiseblue">small</a>
14 small <a class="button small violet">small</a>
15 small <a class="button small deepblue">small</a>
16 small <a class="button small teal">small</a>
17 small <a class="button small mauve">small</a>
18 small <a class="button small pearl">small</a>
19 small <a class="button small steelblue">small</a>
20 small <a class="button small coffee">small</a>
21 small <a class="button small coral">small</a>
22 small <a class="button small crimson">small</a>
23 small <a class="button small hotpink">small</a>
24 small <a class="button small indianred">small</a>
25 small <a class="button small aqua">small</a>

버튼 응용


버튼 + 아이콘


버튼에 아이콘을 추가하여 좀 더 다양하게 꾸밀 수 있습니다. 아이콘의 자세한 정보는 아이콘새창열림에 있습니다.
아래의 셀렉트 박스 값을 변경하시면 아이콘을 변경해 보실 수 있습니다.

: 선택박스를 변경해 보세요!

CSS 버튼-기본형 + 아이콘 속성
NO 버튼 사용코드
1 button+icon <a class="button black"><span class="icon2 icon-arrow1_up"></span>button+icon</a>
2 button+icon <a class="button grey"><span class="icon2 icon-arrow1_up"></span>button+icon</a>
3 button+icon <a class="button light-grey"><span class="icon2 icon-arrow1_up"></span>button+icon</a>
4 button+icon <a class="button light-blue"><span class="icon2 icon-arrow1_up"></span>button+icon</a>
5 button+icon <a class="button yellow"><span class="icon2 icon-arrow1_up"></span>button+icon</a>
6 button+icon <a class="button blue"><span class="icon2 icon-arrow1_up"></span>button+icon</a>
7 button+icon <a class="button gold"><span class="icon2 icon-arrow1_up"></span>button+icon</a>
8 button+icon <a class="button green"><span class="icon2 icon-arrow1_up"></span>button+icon</a>
9 button+icon <a class="button olive-green"><span class="icon2 icon-arrow1_up"></span>button+icon</a>
10 button+icon <a class="button orange"><span class="icon2 icon-arrow1_up"></span>button+icon</a>
11 button+icon <a class="button purple"><span class="icon2 icon-arrow1_up"></span>button+icon</a>
12 button+icon <a class="button red"><span class="icon2 icon-arrow1_up"></span>button+icon</a>
13 button+icon <a class="button turquoiseblue"><span class="icon2 icon-arrow1_up"></span>button+icon</a>
14 button+icon <a class="button violet"><span class="icon2 icon-arrow1_up"></span>button+icon</a>
15 button+icon <a class="button deepblue"><span class="icon2 icon-arrow1_up"></span>button+icon</a>
16 button+icon <a class="button teal"><span class="icon2 icon-arrow1_up"></span>button+icon</a>
17 button+icon <a class="button mauve"><span class="icon2 icon-arrow1_up"></span>button+icon</a>
18 button+icon <a class="button pearl"><span class="icon2 icon-arrow1_up"></span>button+icon</a>
19 button+icon <a class="button steelblue"><span class="icon2 icon-arrow1_up"></span>button+icon</a>
20 button+icon <a class="button coffee"><span class="icon2 icon-arrow1_up"></span>button+icon</a>
21 button+icon <a class="button coral"><span class="icon2 icon-arrow1_up"></span>button+icon</a>
22 button+icon <a class="button crimson"><span class="icon2 icon-arrow1_up"></span>button+icon</a>
23 button+icon <a class="button hotpink"><span class="icon2 icon-arrow1_up"></span>button+icon</a>
24 button+icon <a class="button indianred"><span class="icon2 icon-arrow1_up"></span>button+icon</a>
25 button+icon <a class="button aqua"><span class="icon2 icon-arrow1_up"></span>button+icon</a>

버튼 + ani_type="color" 응용


색상전환(ani_type="color")새창열림를 버튼에 응용하여 자연스러운 색상 변화를 줄 수 있습니다.

CSS 버튼-기본형 속성 + ani_type의 color 적용
NO 버튼 사용코드
1 button <a class="button black" ani_type="color(class:grey)">button</a>
2 button <a class="button grey" ani_type="color(class:light-grey)">button</a>
3 button <a class="button light-grey" ani_type="color(class:light-blue)">button</a>
4 button <a class="button light-blue" ani_type="color(class:yellow)">button</a>
5 button <a class="button yellow" ani_type="color(class:blue)">button</a>
6 button <a class="button blue" ani_type="color(class:gold)">button</a>
7 button <a class="button gold" ani_type="color(class:green)">button</a>
8 button <a class="button green" ani_type="color(class:olive-green)">button</a>
9 button <a class="button olive-green" ani_type="color(class:orange)">button</a>
10 button <a class="button orange" ani_type="color(class:purple)">button</a>
11 button <a class="button purple" ani_type="color(class:red)">button</a>
12 button <a class="button red" ani_type="color(class:turquoiseblue)">button</a>
13 button <a class="button turquoiseblue" ani_type="color(class:violet)">button</a>
14 button <a class="button violet" ani_type="color(class:deepblue)">button</a>
15 button <a class="button deepblue" ani_type="color(class:teal)">button</a>
16 button <a class="button teal" ani_type="color(class:mauve)">button</a>
17 button <a class="button mauve" ani_type="color(class:pearl)">button</a>
18 button <a class="button pearl" ani_type="color(class:steelblue)">button</a>
19 button <a class="button steelblue" ani_type="color(class:coffee)">button</a>
20 button <a class="button coffee" ani_type="color(class:coral)">button</a>
21 button <a class="button coral" ani_type="color(class:crimson)">button</a>
22 button <a class="button crimson" ani_type="color(class:hotpink)">button</a>
23 button <a class="button hotpink" ani_type="color(class:indianred)">button</a>
24 button <a class="button indianred" ani_type="color(class:aqua)">button</a>
25 button <a class="button aqua" ani_type="color(class:black)">button</a>

버튼 + 기본 ani_type 적용


손쉬운 애니메이션 효과(ani_type)새창열림를 버튼에 응용하여 자연스러운 애니메이션을 줄 수 있습니다.

CSS 버튼-기본형 속성 + ani_type 적용
NO ani_type 버튼 사용코드
1 button <a class="button black" ani_type="flash">button</a>
2 button <a class="button black" ani_type="fade">button</a>
3 button <a class="button black" ani_type="bounce">button</a>
4 button <a class="button black" ani_type="shake">button</a>
5 button <a class="button black" ani_type="scale">button</a>
6 button <a class="button black" ani_type="rotate">button</a>
7 button <a class="button black" ani_type="vflip">button</a>
8 button <a class="button black" ani_type="hflip">button</a>

관련 글&정보

TOP

등록일:
마지막 수정일:
답변
목록

스타일시트(CSS)

총글수: 12
스타일시트(CSS) 목록 : 이표는 글순서,첨부파일,제목,추천수,조회수,작성일을 확인할 수 있습니다
글순서NO *(첨부파일) 제목 추천 조회 작성일↑
12 없음 레이아웃 구조 추천:0 조회:5573
11 없음 색상표 추천:0 조회:5306
10 없음 현재글:버튼 추천:0 조회:8844
9 없음 하이라이트 추천:0 조회:4699
8 없음 인용구 추천:0 조회:3404
7 없음 테이블(표) 추천:0 조회:3594
6 없음 박스 리스트 추천:0 조회:3957
5 없음 텝박스 추천:0 조회:4167
4 없음 아이콘 추천:0 조회:6501
3 없음 반응형 기타 추천:0 조회:3473
초기화 
스타일시트(CSS) 검색