매뉴얼::border

border

border-color는 기본 회색으로 적용되어 있으며 취향에 맞게 추가,변경해서 사용할 수 있습니다.

border-1

Markup

<div class="border-1">
    내용
</div>

결과화면

내용

border-2

Markup

<div class="border-2">
    내용
</div>

결과화면

내용

border-3

Markup

<div class="border-3">
    내용
</div>

결과화면

내용

border-style

Markup

<div class="border-3 dotted">
    내용
</div>

결과화면

내용

Markup

<div class="border-3 dashed">
    내용
</div>

결과화면

내용

border-top,border-right,border-bottom,border-left

Markup

<div class="border-top">1</div>
<div class="border-right">2</div>
<div class="border-bottom">3</div>
<div class="border-left">4</div>

<div class="border-top2">5</div>
<div class="border-right2">6</div>
<div class="border-bottom2">7</div>
<div class="border-left2">8</div>

<div class="border-top3">9</div>
<div class="border-right3">10</div>
<div class="border-bottom3">11</div>
<div class="border-left3">12</div>

설명

border-none

Markup

<div class="border-3 border-top0">1</div>
<div class="border-3 border-right0">2</div>
<div class="border-3 border-bottom0">3</div>
<div class="border-3 border-left0">4</div>

설명소스보기

border-0 (border-top0,border-right0,border-bottom0,border-left0) 클래스는 마지막에 선언합니다.

button

CSS code

기본버튼 css


/* Button */
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
border-radius: 2px;
border: 0;
cursor: pointer;
display: inline-block;
height: 2.85rem;
line-height: 2.95rem;
padding: 0 1.5rem;
text-align: center;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
}

button color

CSS code

백그라운드컬러 버튼


/* color */
input[type="submit"].color,
input[type="reset"].color,
input[type="button"].color,
button.color,.button.color{
background-color:#8d9ea0;
border:1px solid #8d9ea0;
color:#ffffff
}

input[type="submit"].color:hover,
input[type="reset"].color:hover,
input[type="button"].color:hover,
button.color:hover,
.button.color:hover{
background-color:rgba(141,158,160,.8);
border:1px solid #8d9ea0;
color:#ffffff
}

button gray

CSS code

회색버튼


/* gray */
input[type="submit"].gray,
input[type="reset"].gray,
input[type="button"].gray,
button.gray,.button.gray{
background-color:#4e4e4f;
color:#fff !important;border:none
}
input[type="submit"].gray:hover,
input[type="reset"].gray:hover,
input[type="button"].gray:hover,
button.gray:hover,
.button.gray:hover {background-color:#2f2f2f;border:none}

input[type="submit"].gray:active,
input[type="reset"].gray:active,
input[type="button"].gray:active,
button.gray:active,
.button.gray:active{background-color:#000;border:none}

ICON 버튼

CSS code

아이콘과 함께 사용할때 아이콘과 텍스트사이에 여백을 줍니다.


/* icon */
input[type="submit"].icon,
input[type="reset"].icon,
input[type="button"].icon,
button.icon,
.button.icon {padding-left:1.35rem;padding-right:1.35rem}

input[type="submit"].icon i,
input[type="reset"].icon i,
input[type="button"].icon i,
button.icon i,
.button.icon i {font-weight:300 !important;vertical-align:middle}

input[type="submit"].icon:before,
input[type="reset"].icon:before,
input[type="button"].icon:before,
button.icon i:before,
.button.icon i:before {margin-right:0.5rem;margin-left:0.5rem}

둥근버튼

CSS code

버튼에 라운드 효과를 줄때 사용하는 클래스입니다.


/* round */
input[type="submit"].round,
input[type="reset"].round,
input[type="button"].round,
button.round,
.button.round {border-radius:40px;}

꽉찬버튼

CSS code

가로폭을 100%로 활용할때 사용합니다.


/* full */
input[type="submit"].full,
input[type="reset"].full,
input[type="button"].full,
button.full,
.button.full{display:block;margin:0 0 1rem 0;width:100%}

버튼조합

예제소스

버튼 스타일응용 예제


<div class="actions">
    <li><a class="button icon color">자세히보기 <i class="axi axi-angle-right"></i></a></li>
    <li><a class="button line" style="padding:0 10px"><i class="axi axi-plus"></i></a></li>
    <li><a class="button gray" style="padding:0 10px;background:#d1216b;border-radius:50%;width:42px;height:42px;line-height:40px"><i class="axi axi-cog"></i></a></li>
    <li><a class="button" style="border-style:dashed">download <i class="axi axi-inbox"></i></a></li>
    <li><a class="button gray round">등록</a></li>
    <li><a class="button line round"><i class="axi axi-heart"></i> 1408 </a></li>
    <li><a class="button round color">PLAY <i class="axi axi-play"></i></a></li>
    <li><a class="button round icon underline" style="border-radius:10px;">전체보기</a></li>
    <li><a class="button round" style="background:#3cc9b5;color:#fff;border:none">자세히보기</a></li>
</div>
<div class="actions vertical margin-top-1">
    <li><a class="button full line">자세히보기</a></li>
    <li><a class="button full icon">동의합니다 <i class="axi axi-angle-right"></i></a></li>
    <li><a class="button full color" style="background:#02df59;border:1px solid #1ad564">로그인</a></li>
</div>