Object Template : Button Type

Button Type

Basic Button

class name : Button

Button 은  <button>, <input type="button">, <a>모두에 사용할 수 있습니다.

line button을 적용하고 싶은 경우 class name : Typeb를 추가합니다.

Simbolic Button
  • 취소, Default : class name - Default
  • 확인 : class name - Confirm
  • 성공 : class name - Success
  • 경고 : class name - Warning
  • 위험 : class name - Danger

* 위의 class는 Button class 선언 후 각 용도에 따라 같은 tag 내에 선언해줍니다.

Button Size
  • Base : class name - 추가 되는 class name 없음
  • Large : class name - Large
  • Extra : class name - Extra

* 위의 class는 Button class 선언 후 각 용도에 따라 같은 tag 내에 선언해줍니다.

Basic Button
						
							<button class="Button">Button</button>
							<button class="Button Typeb">Button(Typeb)</button>
							<button class="Button" data-disabled="true">Button(Disabled)</button>
						
					
Simbolic Button
						
							<button class="Button Default">Button Default</button>
							<button class="Button Confirm">Button Confirm</button>
							<button class="Button Success">Button Success</button>
							<button class="Button Warning">Button Warning</button>
							<button class="Button Danger">Button Danger</button>
						
					
Button Size
						
							<button class="Button">Button</button>
							<button class="Button Large">Button</button>
							<button class="Button Extra">Button</button>
						
					

Button Width & Position

Button Width Size

버튼에 Width 값 적용할 경우 : class name - Width-100
Width값은 5~100%까지 5단위로 끊어집니다.

Button Position

버튼이 1개이든 2개이든 포지션을 지정해줄경우 class-name 으로 Helper css의 'Float-left', 'Float-right'를 활용하여 왼쪽 오른쪽으로 분리해줍니다.
Center의 경우에는 'Text-center' 를 사용해도 되고 상황에 따라 'Margin-auto'를 사용해도 됩니다.

Button Width Sample

						
							<button class="Button Width-30">Button Width Size 30%</button>
							<button class="Button Typeb Width-50">Button Typeb / Width Size 50%</button>
							<button class="Button Width-80">Button Width Size 80%</button>
							<button class="Button Typeb Width-100">Button Typeb Width Size 100%</button>
						
					
Position left
							
								<div class="Clearboth">
								    <button class="Button">1st button</button>
								    <button class="Button Typeb">2nd button</button>
								</div>

								* 'Clearboth'는 Helper css로 float 된 전 객체에 대한 영향을 해제해주는 css 입니다.
							
						
Position center
							
								<div class="Clearboth Text-center">
								    <button class="Button">1st button</button>
								    <button class="Button Typeb">2nd button</button>
								</div>
								* 'Text-center'는 'text-align: center' 를 나타내는 Helper css 입니다.
							
						
Position right
							
								<div class="Clearboth Float-right">
								    <button class"Button">1st button</button>
								    <button class"Button Warning">2nd button</button>
								    <button class"Button Typeb">3rd button</button>
								</div>

								* 'Float-right'는 'float: right' 를 나타내는 Helper css 입니다.
							
						
Position left & right
							
								<div class="Clearboth">
								    <div class="Float-left">
								        <button class="Button">1st button</button>
								        <button class="Button Warning">2nd button</button>
								        <button class="Button Typeb">3rd button</button>
								    </div>
								    <div class="Float-right">
								        <button class="Button">1st button</button>
								        <button class="Button Typeb">2nd button</button>
								    </div>
								</div>

								* 'Float-left'는 'float: left'를 나타내는 Helper css 입니다.
							
						
SK Holdings C&C

26, Jong-ro, Jongno-gu, Seoul, 03188, Republic of Korea
Copyright © 2018 SK Holdings C&C. All rights reserved.