본문 영역
버튼 상세보기
작성자: 관리자
추천: 0 조회: 9166
버튼
버튼은 크기별로 3가지(기본형, large형, small형)로 나뉩니다.
버튼(반응형)으로 쓸 경우, button, a, input 태그가 가능하나, a 태그를 사용하세요. 그냥 모형(미 반응형)으로 사용하실 경우는 span으로 사용하시면 됩니다.
반응형 : 마우스에 반응
크기별
기본형 버튼
/* 버튼 */
.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 만으로 설계되었습니다.
| NO | 색상 | 버튼 | 사용코드 |
|---|---|---|---|
| 1 | black | button | <a class="button black">button</a> |
| 2 | grey | button | <a class="button grey">button</a> |
| 3 | light-grey | button | <a class="button light-grey">button</a> |
| 4 | light-blue | button | <a class="button light-blue">button</a> |
| 5 | yellow | button | <a class="button yellow">button</a> |
| 6 | blue | button | <a class="button blue">button</a> |
| 7 | gold | button | <a class="button gold">button</a> |
| 8 | green | button | <a class="button green">button</a> |
| 9 | olive-green | button | <a class="button olive-green">button</a> |
| 10 | orange | button | <a class="button orange">button</a> |
| 11 | purple | button | <a class="button purple">button</a> |
| 12 | red | button | <a class="button red">button</a> |
| 13 | turquoiseblue | button | <a class="button turquoiseblue">button</a> |
| 14 | violet | button | <a class="button violet">button</a> |
| 15 | deepblue | button | <a class="button deepblue">button</a> |
| 16 | teal | button | <a class="button teal">button</a> |
| 17 | mauve | button | <a class="button mauve">button</a> |
| 18 | pearl | button | <a class="button pearl">button</a> |
| 19 | steelblue | button | <a class="button steelblue">button</a> |
| 20 | coffee | button | <a class="button coffee">button</a> |
| 21 | coral | button | <a class="button coral">button</a> |
| 22 | crimson | button | <a class="button crimson">button</a> |
| 23 | hotpink | button | <a class="button hotpink">button</a> |
| 24 | indianred | button | <a class="button indianred">button</a> |
| 25 | aqua | 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;
}
| NO | 색상 | 버튼 | 사용코드 |
|---|---|---|---|
| 1 | black | large | <a class="button large black">large</a> |
| 2 | grey | large | <a class="button large grey">large</a> |
| 3 | light-grey | large | <a class="button large light-grey">large</a> |
| 4 | light-blue | large | <a class="button large light-blue">large</a> |
| 5 | yellow | large | <a class="button large yellow">large</a> |
| 6 | blue | large | <a class="button large blue">large</a> |
| 7 | gold | large | <a class="button large gold">large</a> |
| 8 | green | large | <a class="button large green">large</a> |
| 9 | olive-green | large | <a class="button large olive-green">large</a> |
| 10 | orange | large | <a class="button large orange">large</a> |
| 11 | purple | large | <a class="button large purple">large</a> |
| 12 | red | large | <a class="button large red">large</a> |
| 13 | turquoiseblue | large | <a class="button large turquoiseblue">large</a> |
| 14 | violet | large | <a class="button large violet">large</a> |
| 15 | deepblue | large | <a class="button large deepblue">large</a> |
| 16 | teal | large | <a class="button large teal">large</a> |
| 17 | mauve | large | <a class="button large mauve">large</a> |
| 18 | pearl | large | <a class="button large pearl">large</a> |
| 19 | steelblue | large | <a class="button large steelblue">large</a> |
| 20 | coffee | large | <a class="button large coffee">large</a> |
| 21 | coral | large | <a class="button large coral">large</a> |
| 22 | crimson | large | <a class="button large crimson">large</a> |
| 23 | hotpink | large | <a class="button large hotpink">large</a> |
| 24 | indianred | large | <a class="button large indianred">large</a> |
| 25 | aqua | 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;
}
| NO | 색상 | 버튼 | 사용코드 |
|---|---|---|---|
| 1 | black | small | <a class="button small black">small</a> |
| 2 | grey | small | <a class="button small grey">small</a> |
| 3 | light-grey | small | <a class="button small light-grey">small</a> |
| 4 | light-blue | small | <a class="button small light-blue">small</a> |
| 5 | yellow | small | <a class="button small yellow">small</a> |
| 6 | blue | small | <a class="button small blue">small</a> |
| 7 | gold | small | <a class="button small gold">small</a> |
| 8 | green | small | <a class="button small green">small</a> |
| 9 | olive-green | small | <a class="button small olive-green">small</a> |
| 10 | orange | small | <a class="button small orange">small</a> |
| 11 | purple | small | <a class="button small purple">small</a> |
| 12 | red | small | <a class="button small red">small</a> |
| 13 | turquoiseblue | small | <a class="button small turquoiseblue">small</a> |
| 14 | violet | small | <a class="button small violet">small</a> |
| 15 | deepblue | small | <a class="button small deepblue">small</a> |
| 16 | teal | small | <a class="button small teal">small</a> |
| 17 | mauve | small | <a class="button small mauve">small</a> |
| 18 | pearl | small | <a class="button small pearl">small</a> |
| 19 | steelblue | small | <a class="button small steelblue">small</a> |
| 20 | coffee | small | <a class="button small coffee">small</a> |
| 21 | coral | small | <a class="button small coral">small</a> |
| 22 | crimson | small | <a class="button small crimson">small</a> |
| 23 | hotpink | small | <a class="button small hotpink">small</a> |
| 24 | indianred | small | <a class="button small indianred">small</a> |
| 25 | aqua | small | <a class="button small aqua">small</a> |
버튼 응용
버튼 + 아이콘
버튼에 아이콘을 추가하여 좀 더 다양하게 꾸밀 수 있습니다. 아이콘의 자세한 정보는 아이콘
에 있습니다.아래의 셀렉트 박스 값을 변경하시면 아이콘을 변경해 보실 수 있습니다.
: 선택박스를 변경해 보세요!
| 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")
를 버튼에 응용하여 자연스러운 색상 변화를 줄 수 있습니다.| 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)
를 버튼에 응용하여 자연스러운 애니메이션을 줄 수 있습니다.| NO | ani_type | 버튼 | 사용코드 |
|---|---|---|---|
| 1 | flash | button | <a class="button black" ani_type="flash">button</a> |
| 2 | fade | button | <a class="button black" ani_type="fade">button</a> |
| 3 | bounce | button | <a class="button black" ani_type="bounce">button</a> |
| 4 | shake | button | <a class="button black" ani_type="shake">button</a> |
| 5 | scale | button | <a class="button black" ani_type="scale">button</a> |
| 6 | rotate | button | <a class="button black" ani_type="rotate">button</a> |
| 7 | vflip | button | <a class="button black" ani_type="vflip">button</a> |
| 8 | hflip | button | <a class="button black" ani_type="hflip">button</a> |
관련 글&정보
등록일:
마지막 수정일:
스타일시트(CSS)
총글수: 12
| 글순서NO | *(첨부파일) | 제목 | 추천 | 조회 | 작성일↑ |
|---|---|---|---|---|---|
| 12 | 없음 | 레이아웃 구조 | 추천:0 | 조회:5863 | |
| 11 | 없음 | 색상표 | 추천:0 | 조회:5628 | |
| 10 | 없음 | 현재글:버튼 | 추천:0 | 조회:9166 | |
| 9 | 없음 | 하이라이트 | 추천:0 | 조회:4928 | |
| 8 | 없음 | 인용구 | 추천:0 | 조회:3635 | |
| 7 | 없음 | 테이블(표) | 추천:0 | 조회:3795 | |
| 6 | 없음 | 박스 리스트 | 추천:0 | 조회:4211 | |
| 5 | 없음 | 텝박스 | 추천:0 | 조회:4432 | |
| 4 | 없음 | 아이콘 | 추천:0 | 조회:6792 | |
| 3 | 없음 | 반응형 기타 | 추천:0 | 조회:3654 |
