이윰

컬러

소스코드는 해당 예제에 마우스 포인트를 갖다대면 버튼이 나타나며, 클릭하면 소스코드를 볼 수 있습니다.

.bg-light

#D6D6D6

#C4C4C4

#B5B5B5

#A6A6A6

#959595

.bg-dark

#474A5E

#3D4254

#2E3340

#242630

#1C1C26

.bg-red

#FF6F52

#FF5330

#FF2900

#E52700

#CC2300

.bg-blue

#59A7FF

#2289FF

#0078FF

#006BE2

#0053B0

.bg-green

#B3D84E

#A0CB26

#87BA00

#759F00

#537200

.bg-yellow

#FFBD5F

#FFA72C

#FF9500

#EC8B00

#C17100

.bg-purple

#9475CC

#7D57C2

#663BB8

#5E36B0

#522EA8

.bg-brown

#A18780

#8C6E63

#785447

#6E4D40

#5C4038

.bg-orange

#FF8A66

#FF7042

#FF5721

#F5521F

#E64A1A

.bg-indigo

#7887CC

#5C6BBF

#4052B5

#384AAB

#30409E

.bg-teal

#4DB5AB

#26A699

#009687

#008A7A

#00786B

.bg-pink

#F06191

#ED407A

#E81F63

#D91C61

#C2175C

버튼

소스코드는 해당 예제에 마우스 포인트를 갖다대면 버튼이 나타나며, 클릭하면 소스코드를 볼 수 있습니다.

Button Block

.btn-e-block

아래의 예제들은 소스 코드에 .btn-e-block이 포함되어 있습니다. 버튼의 block 속성을 원치않으면 .btn-e-block을 지우고 사용하세요.

Button State

.disabled .active

Button Size

.btn-e-xs .btn-e-sm .btn-e-lg .btn-e-xlg

Button Option

.btn-e-rounded

.btn-e-gradient

확장된 버튼

소스코드는 해당 예제에 마우스 포인트를 갖다대면 버튼이 나타나며, 클릭하면 소스코드를 볼 수 있습니다.

아래의 예제들은 소스 코드에 .btn-e-block이 포함되어 있습니다. 버튼의 block 속성을 원치않으면 .btn-e-block을 지우고 사용하세요.

Bordered Button Option

.btn-e-brd

.btn-e-brd .btn-brd-hover

.btn-e-brd .btn-brd-hover .btn-e-rounded

버튼 드롭다운

버튼의 색상과 크기등의 옵션을 조합해서 사용할수 있습니다.

컬러

버튼

Button Block

Button State

Button Size

Button Option

확장된 버튼

Bordered Button Option

버튼 드롭다운

단버튼 드롭다운

분할된 버튼 드롭다운

크기 조절

드롭업형