button

기본 버튼 스타일이 정의되어 있으며 취향에 맞게 추가,변경할 수 있습니다.

button default

Markup

<!-- 모두 동일한 형태의 버튼이 된다 -->
<button>버튼</button>
<input type="button" value="버튼" >
<p class="button">버튼</p>
<a href="#none" class="button">버튼</a>

결과화면 CSS code

  • 버튼

  • 버튼

    • 설명

    기본 버튼입니다.

    button color

    Markup

    <button class="color">버튼</button>
<input type="button" value="버튼" class="color">
<p class="button color">버튼</p>
<a href="#none" class="button color">버튼</a>

    결과화면 CSS code

  • 버튼

  • 버튼

    • 설명

    버튼에 색을 줍니다.

    button gray

    Markup

    <button class="gray">버튼</button>
<input type="button" value="버튼" class="gray">
<p class="button gray">버튼</p>
<a href="#none" class="button gray">버튼</a>

    결과화면 CSS code

  • 버튼

  • 버튼

    • 설명

    어두운색의 버튼을 만듭니다.

    button icon

    Markup

    <button class="icon">버튼<i class="axi axi-keyboard-arrow-right"></i></button>
<input type="button" value="버튼" class="icon">
<p class="button icon">버튼<i class="axi axi-keyboard-arrow-right"></i></p>
<a href="#none" class="button icon">버튼<i class="axi axi-keyboard-arrow-right"></i></a>

    결과화면 CSS code

  • 버튼

  • 버튼

    • 설명

    아이콘과 텍스트 사이에 여백을 줍니다.

    button round

    Markup

    <button class="round">버튼</button>
<input type="button" value="버튼" class="round">
<p class="button round">버튼</p>
<a href="#none" class="button round">버튼</a>

    결과화면 CSS code

  • 버튼

  • 버튼

    • 설명

    버튼에 둥근효과를 줍니다.

    button full

    Markup

    <button class="full">버튼</button>
<input type="button" value="버튼" class="full">
<p class="button full">버튼</p>
<a href="#none" class="button full">버튼</a>

    결과화면 CSS code

  • 버튼

  • 버튼

    • 설명

    가로폭 100% 꽉찬 버튼을 만듭니다.

    button 조합 및 응용

    Markup

    <a class="button icon color">자세히보기 <i class="axi axi-angle-right"></i></a>
<a class="button line" style="padding:0 10px"><i class="axi axi-plus"></i></a>
<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>
<a class="button" style="border-style:dashed">download <i class="axi axi-inbox"></i></a>
<a class="button gray round">등록</a>
<a class="button line round"><i class="axi axi-heart"></i> 1408 </a>
<a class="button round color">PLAY <i class="axi axi-play"></i></a>
<a class="button round icon underline" style="border-radius:10px;">전체보기</a>
<a class="button round" style="background:#3cc9b5;color:#fff;border:none">자세히보기</a>

<a class="button full line">자세히보기</a>
<a class="button full icon">동의합니다 <i class="axi axi-angle-right"></i></a>
<a class="button full color" style="background:#02df59;border:1px solid #1ad564">로그인</a>

    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>