SPSTRAP Document API

Base Button

Button scale

Button Base color

Theme white box

Theme light box

Theme gray box

Theme dark box

Theme primary box

Theme box - round

Line style - light

Line style - gray

Line style - dark

Line style - primary

Border style - light

Border style - gray

Border style - dark

Border style - primary

Underline style - light

Underline style - gray

Underline style - dark

Underline style - primary

Fill Transition style - light

<a href="#!" class="sp--btn" theme="fill-light" scale="ss"><span>ss</span></a>
                            <a href="#!" class="sp--btn" theme="fill-light" scale="xs"><span>xs</span></a>
                            <a href="#!" class="sp--btn" theme="fill-light-vertical" scale="sm"><span>sm</span></a>
                            <a href="#!" class="sp--btn" theme="fill-light-horizontal" scale="md"><span>md</span></a>
                            <a href="#!" class="sp--btn" theme="fill-light-top" scale="lg"><span>lg</span></a>
                            <a href="#!" class="sp--btn" theme="fill-light-right" scale="xl"><span>xl</span></a>
                            <a href="#!" class="sp--btn" theme="fill-light-bottom" scale="2xl"><span>2xl</span></a>
                            <a href="#!" class="sp--btn" theme="fill-light-left" scale="3xl"><span>3xl</span></a>

Fill Transition style - gray

Fill Transition style - dark

Fill Transition style - primary

Group

Group - fill (full - dynamic width)

Group - fill (full - same width)

Group - fill (grid)

Group - fill (justify)

Group - direction (left)

Group - direction (center)

Group - direction (right)

Group - vertical align (top)

Group - vertical align (middle)

Group - vertical align (bottom)

Gap (between space)

<div class="sp--btn-group" [fill="fixed"] style="padding:30px;background:#eaeaea;">
                                <div class="sp--btn-gap" gap="lg">
                                    <a href="#!" class="sp--btn" theme="line-dark" scale="3xl">button button button</a>
                                    <a href="#!" class="sp--btn" theme="box-dark" scale="3xl">button button button</a>
                                    <a href="#!" class="sp--btn" theme="line-dark" scale="3xl">button button button</a>
                                    <a href="#!" class="sp--btn" theme="box-dark" scale="3xl">button button button</a>
                                    <a href="#!" class="sp--btn" theme="line-dark" scale="3xl">button button button</a>
                                    <a href="#!" class="sp--btn" theme="line-dark" scale="3xl">button button button</a>
                                    <a href="#!" class="sp--btn" theme="line-dark" scale="3xl">button button button</a>
                                    <a href="#!" class="sp--btn" theme="line-dark" scale="3xl">button button button</a>
                                    <a href="#!" class="sp--btn" theme="line-dark" scale="3xl">button button button</a>
                                </div>
                            </div>

<hr />

<div class="sp--btn-group" style="padding:30px;background:#eaeaea;">
                                <div class="sp--btn-gap" gap="lg">
                                    <a href="#!" class="sp--btn" theme="line-dark" scale="3xl">button</a>
                                    <a href="#!" class="sp--btn" theme="box-dark" scale="3xl">button</a>
                                    <a href="#!" class="sp--btn" theme="line-dark" scale="3xl">button</a>
                                    <a href="#!" class="sp--btn" theme="box-dark" scale="3xl">button</a>
                                    <a href="#!" class="sp--btn" theme="line-dark" scale="3xl">button</a>
                                </div>
                            </div>

<hr />

<div class="sp--btn-group" [direction="center"] style="padding:30px;background:#eaeaea;">
                                <div class="sp--btn-gap" gap="lg">
                                    <a href="#!" class="sp--btn" theme="line-dark" scale="3xl">button</a>
                                    <a href="#!" class="sp--btn" theme="box-dark" scale="3xl">button</a>
                                    <a href="#!" class="sp--btn" theme="line-dark" scale="3xl">button</a>
                                    <a href="#!" class="sp--btn" theme="box-dark" scale="3xl">button</a>
                                    <a href="#!" class="sp--btn" theme="line-dark" scale="3xl">button</a>
                                </div>
                            </div>

<hr />

<div class="sp--btn-group" [direction="right"] style="padding:30px;background:#eaeaea;">
                                <div class="sp--btn-gap" gap="lg">
                                    <a href="#!" class="sp--btn" theme="line-dark" scale="3xl">button</a>
                                    <a href="#!" class="sp--btn" theme="box-dark" scale="3xl">button</a>
                                    <a href="#!" class="sp--btn" theme="line-dark" scale="3xl">button</a>
                                    <a href="#!" class="sp--btn" theme="box-dark" scale="3xl">button</a>
                                    <a href="#!" class="sp--btn" theme="line-dark" scale="3xl">button</a>
                                </div>
                            </div>

<hr />

<div class="sp--btn-group" [fill="full"] style="padding:30px;background:#eaeaea;">
                                <div class="sp--btn-gap" gap="lg">
                                    <a href="#!" class="sp--btn" theme="line-dark" scale="3xl">button</a>
                                    <a href="#!" class="sp--btn" theme="box-dark" scale="3xl">button</a>
                                    <a href="#!" class="sp--btn" theme="line-dark" scale="3xl">button</a>
                                    <a href="#!" class="sp--btn" theme="box-dark" scale="3xl">full option preview - other size</a>
                                    <a href="#!" class="sp--btn" theme="line-dark" scale="3xl">button</a>
                                </div>
                            </div>

<hr />

<div class="sp--btn-group" [fill="fullsame"] style="padding:30px;background:#eaeaea;">
                                <div class="sp--btn-gap" gap="lg">
                                    <a href="#!" class="sp--btn" theme="line-dark" scale="3xl">button</a>
                                    <a href="#!" class="sp--btn" theme="box-dark" scale="3xl">full same option preview</a>
                                    <a href="#!" class="sp--btn" theme="line-dark" scale="3xl">button</a>
                                    <a href="#!" class="sp--btn" theme="box-dark" scale="3xl">button</a>
                                    <a href="#!" class="sp--btn" theme="line-dark" scale="3xl">button</a>
                                </div>
                            </div>

<hr />

<div class="sp--btn-group" [fill="grid"] style="padding:30px;background:#eaeaea;">
                                <div class="sp--btn-gap" gap="xl">
                                    <a href="#!" class="sp--btn" theme="line-dark" scale="3xl">button</a>
                                    <a href="#!" class="sp--btn" theme="box-dark" scale="3xl">button</a>
                                    <a href="#!" class="sp--btn" theme="line-dark" scale="3xl">button</a>
                                    <a href="#!" class="sp--btn" theme="box-dark" scale="3xl">button</a>
                                    <a href="#!" class="sp--btn" theme="line-dark" scale="3xl">button</a>
                                </div>
                            </div>

<hr />

<div class="sp--btn-group" [fill="justify"] style="padding:30px;background:#eaeaea;">
                                <div class="sp--btn-gap" gap="xl">
                                    <a href="#!" class="sp--btn" theme="line-dark" scale="3xl">button</a>
                                    <a href="#!" class="sp--btn" theme="box-dark" scale="3xl">button</a>
                                    <a href="#!" class="sp--btn" theme="line-dark" scale="3xl">button</a>
                                    <a href="#!" class="sp--btn" theme="box-dark" scale="3xl">button</a>
                                    <a href="#!" class="sp--btn" theme="line-dark" scale="3xl">button</a>
                                </div>
                            </div>

Gap - Same width (with responsive)

Block type

Block align style

<div class="sp--btn-group" [fill="block"] vertical="bottom">
                                <div class="sp--btn-gap" gap="md">
                                    <a href="#!" class="sp--btn" theme="box-light-[left]" scale="lg">left</a>
                                    <a href="#!" class="sp--btn" theme="box-gray-center" scale="xl">center</a>
                                    <a href="#!" class="sp--btn" theme="box-dark-right" scale="2xl">right</a>
                                    <a href="#!" class="sp--btn" theme="box-primary-[both]" scale="3xl">
                                        <span>😀 both</span>
                                        <span>right description</span>
                                    </a>
                                    <a href="#!" class="sp--btn" theme="box-primary-[thumbnail]" scale="3xl">
                                        <span>😀</span>
                                        <span>right description</span>
                                    </a>
                                </div>
                            </div>

Hover effect

<div class="sp--btn" [effect="light"] style="padding:5px 7px;">
                                호버 색상 이펙트 ( 라이트 )
                            </div>
                            <div class="sp--btn" effect="primary" style="padding:5px 7px;">
                                호버 색상 이펙트 ( 메인색상 )
                            </div>
                            <div class="sp--btn" effect="dark" style="padding:5px 7px;">
                                호버 색상 이펙트 ( 다크 )
                            </div>
                            <div class="sp--btn" effect="underline" style="padding:5px 7px;">
                                언더라인 이펙트
                            </div>
                            <div class="sp--btn" effect="underline-ltr" style="padding:5px 7px;">
                                언더라인 이펙트 ( left to right )
                            </div>
                            <div class="sp--btn" effect="underline-rtl" style="padding:5px 7px;">
                                언더라인 이펙트 ( right to left )
                            </div>
                            <div class="sp--btn" effect="underline-tick" style="padding:5px 7px;">
                                언더라인 이펙트 ( tick )
                            </div>
                            <div class="sp--btn" effect="underline-bold" style="padding:5px 7px;">
                                언더라인 이펙트 ( bold )
                            </div>

Hover effect (with dropdown)

<div class="[sp--dropdown]" effect="slideup">
                                <ul>
                                    <li>
                                        <a href="#!" class="sp--btn" [effect="dark"] scale="lg">MENU 2</a>
                                        <div class="sp--dropdown-layer">
                                            <ul>
                                                <li><a href="#!" class="sp--btn" [effect="underline-ltr"] scale="lg">MENU 2 - 1</a></li>
                                                <li><a href="#!" class="sp--btn" [effect="underline-ltr"] scale="lg">MENU 2 - 2 CENTER DESC</a></li>
                                                <li><a href="#!" class="sp--btn" [effect="underline-ltr"] scale="lg">MENU 2 - 3 LONG</a></li>
                                            </ul>
                                        </div>
                                    </li>
                                </ul>
                            </div>

Class

name	description
.sp--btn-group	버튼 그룹박스
.sp--btn	버튼

Attribute

name	description
scale	xs, sm, md, lg, xl, 2xl, 3xl 버튼의 크기를 결정하는 attribute
theme	버튼의 디자인을 결정하는 테마 attribute
fill	full, grid, justify 버튼 그룹에 지정해서 버튼이 그룹내에서 나열되는 모습을 지정
direction	left, center, right 버튼의 가로 정렬 ( 좌, 중, 우)
vertical	top, middle, bottom 버튼의 세로 정렬 ( 상, 중, 하 )
gap	xs, sm, md, lg, xl, 2xl, 3xl 버튼사이의 여백을 표현함. ( xs = 1px, 3xl = 30px )
float	right 버튼 내부의 정렬 ( with span )
effect	버튼의 역할이 아닌 경우에도 함께 사용할 이펙트 영역 스케일이나 테마 없이 class="sp--btn" effect="underline" 이런 형태로 사용한다.

Etc

버튼과 박스의 컨테이너를 같이 가려 했으나,
경험상 박스 레이아웃은 변수가 많으므로, 별도로 구성하기로 결정