버튼의 다양한 종류와 효과주기 모음

Codepen에서 간추린 CSS에 참조할 수 있는 스타일리쉬한 버튼(Button) 디자인 모음입니다.
버튼의 다양한 종류와 효과주기 등을 살펴보세요.

모던하면서 스타일리쉬한 버튼 디자인 모음입니다.

45개의 다양한 버튼

다음은 모던하면서 플랫한 디자인 버튼 모음입니다.

플랫한 디자인 버튼

다음은 일반적이면서도 무난한 그라디언트가 살짝 있는 버튼 모음입니다.

그라디언트 버튼

다음은 Black&White 버튼 모음입니다. 간결하면서 깔끔한 스타일이 적용되어 있습니다.

Black&White 버튼

호버 등 효과주기가 매우 매력적인 버튼의 모음입니다.

호버 효과가 매력적인 버튼
호버 시 그라디언트에 애니메이션 효과가 있는 버튼

다음의 버튼은 호버 시 매우 스타일리쉬하면서도 글리치(Glitch, 화면이 지지직 거리는듯한) 효과가 있는 버튼입니다. 이 버튼은 스타일시트로만 구현되지는 않고 스크립트를 같이 활용해서 구현합니다. 스타일시트은 Sass 언어로 구현되어 있어서 CSS로 포맷한 코드를 예제 밑에 첨부하였습니다.

글리치(Glitch, 화면이 지지직 거리는듯한) 효과가 있는 버튼

위 예제의 Sass 언어로 구현되어 있는 스타일시트를 CSS로 포맷한 코드입니다.

CSS 
.btn {
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    font-family: "Roboto mono", sans-serif;
    font-weight: 500;
    border: 1px solid #121212;
    line-height: 1.5;
    font-size: em(14px);
    padding: 16px;
    width: 100%;
    display: block;
    cursor: pointer;
    position: relative;
    background-color: #fff;
    overflow: hidden;
    outline: none;
    text-decoration: none;
    text-align: center;
    vertical-align: bottom;
}
.btn:focus {
    outline: none;
}
@media screen and (min-width: 30em) {
    .btn {
        max-width: 220px;
    }
    .btn.btn-small {
        max-width: 180px;
    }
}
@media screen and (min-width: 40em) {
    .btn {
        display: inline-block;
    }
}
.btn-clear {
    background-color: transparent;
}
.btn-clear:hover {
    background-color: #121212;
    color: #fff;
}
.btn-clear.btn-light {
    border-color: #fff;
    color: #fff;
}
.btn-clear.btn-light:hover {
    color: #121212;
    background-color: #fff;
}
.btn-light:hover {
    background-color: #121212;
    color: #fff;
}
.btn-dark {
    background-color: #121212;
    color: #fff;
    border-color: #fff;
}
.btn-dark:hover {
  color: #807f83;
}
.btn-glitch {
    transform: translateZ(0);
    overflow: visible;
}
.btn-glitch.btn-glitch-active {
    -webkit-filter: url("#filter");
    filter: url("#filter");
}
.btn-glitch.btn-glitch-active::after,
.btn-glitch.btn-glitch-active::before {
    content: "";
    width: 1px;
    position: absolute;
    top: -1px;
    bottom: -1px;
}
.btn-glitch.btn-glitch-active::after {
    left: -2px;
    background-color: #ff536b;
    animation: colorshift-red 2.6s infinite;
    animation-timing-function: step-end;
}
.btn-glitch.btn-glitch-active::before {
    right: -2px;
    background-color: #3ffeff;
    animation: colorshift-blue 2.6s infinite;
    animation-timing-function: step-end;
}
body {
    margin: 0;
}
.body-section {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    height: 100vh;
}
.body-section .dark {
    background-color: #121212;
}
.body-section .half {
    flex: 0 0 100%;
    max-height: 50%;
    min-height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
@keyframes colorshift-red {
    0%, 7% {
        background-color: #ff536b;
    }
    8%, 18% {
        background-color: transparent;
    }
    19% {
        background-color: #ff536b;
        width: 2px;
    }
    23%, 100% {
        background-color: transparent;
    }
}
@keyframes colorshift-blue {
    0%, 7% {
        background-color: #3ffeff;
    }
    8%, 18% {
        background-color: transparent;
    }
    19% {
        background-color: #3ffeff;
        width: 2px;
    }
    23%, 100% {
        background-color: transparent;
    }
}

참고하세요! 🎨
CSS를 적용하면 나만의 스타일이 적용된 체크박스를 디자인할 수 있습니다.
CSS 체크박스(checkbox) 커스텀 스타일링하는 방법을 참고하세요!

다음은 체크박스(<input type="checkbox">)를 커스텀하게 스타일한 스위치 토글 버튼 모음입니다.

이 버튼은 스타일시트로만 구현되지는 않고 스크립트를 같이 활용해서 구현합니다. 스타일시트은 Sass 언어로 구현되어 있어서 CSS로 포맷한 코드를 예제 밑에 첨부하였습니다.

체크박스를 커스텀하게 스타일한 스위치 토글 버튼

위 예제의 Sass 언어로 구현되어 있는 스타일시트를 CSS로 포맷한 코드입니다.

CSS 
.layout {
    font-family: sans-serif;
}
.input-switch-ios input[type="checkbox"] {
    display: none;
}
.input-switch-ios input[type="checkbox"] + label {
    display: block;
    position: relative;
    height: 40px;
    width: 70px;
    background-color: white;
    border: 2px solid #eee;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.4s ease-in-out;
    margin: 10px;
}
.input-switch-ios input[type="checkbox"] + label:after {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), 0 0 0 1px #ddd;
    transition: all 0.4s ease-in-out;
    position: absolute;
    right: 50%;
    border-radius: 20px;
}
.input-switch-ios input[type="checkbox"]:checked + label {
    background-color: #00e169;
}
.input-switch-ios input[type="checkbox"]:checked + label:after {
    content: "";
    right: 0;
}
.input-switch input[type="checkbox"] {
    display: none;
}
.input-switch input[type="checkbox"] + label {
    display: block;
    position: relative;
    height: 40px;
    width: 80px;
    background-color: #ddd;
    border: 1px solid #777;
    border-radius: 5px;
    cursor: pointer;
    margin: 10px;
}
.input-switch input[type="checkbox"] + label:after {
    content: attr(data-off);
    display: block;
    width: 40px;
    background-color: #888;
    text-align: center;
    text-transform: uppercase;
    transition: all 0.4s ease;
    position: absolute;
    font-size: 14px;
    line-height: 14px;
    padding: 13px 0;
    right: 50%;
    border-radius: 5px;
    color: white;
    font-weight: bold;
    font-family: "Arial", sans-serif;
}
.input-switch input[type="checkbox"]:checked + label:after {
  content: attr(data-on);
  right: 0;
  background-color: #333;
}

다음은 라디오 버튼(<input type="radio">)을 커스텀하게 스타일한 스위치 토글 버튼 모음입니다.

참고하세요! 🎨
CSS를 적용하면 나만의 스타일이 적용된 라디오 버튼을 디자인할 수 있습니다.
CSS 라디오 버튼을 커스텀 스타일링하는 방법을 참고하세요!

라디오 커스텀하게 스타일한 스위치 토글 버튼
라디오 커스텀하게 스타일한 스위치 토글 버튼

다음은 모바일 등에서 많이 사용되는 햄버거 메뉴 버튼 모음입니다.

햄버거 메뉴 버튼

다음의 예제에서 스타일시트은 Sass 언어로 구현되어 있어서 CSS로 포맷한 코드를 예제 밑에 첨부하였습니다.

햄버거 메뉴 버튼

위 예제의 Sass 언어로 구현되어 있는 스타일시트를 CSS로 포맷한 코드입니다.

CSS 
body {
    position: relative;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100vh;
    background: radial-gradient(#5E802B, #2F4016);
    font-family: sans-serif;
    text-align: center;
}
body h2,
body h3,
body p {
    color: white;
}
.wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
}
.cell {
    flex-grow: 1;
    flex-basis: 50%;
    margin: 0 20px;
    display: flex;
    flex-direction: column;
}
.cell div {
    margin-top: auto;
}

/****************
* Burger Styles *
*****************/
.burger {
    position: relative;
    width: 60px;
    height: 60px;
    padding: 0;
    border: none;
    background-color: transparent;
}
.burger__bar {
    height: 10%;
    border-radius: 2px;
    width: 80%;
    background-color: white;
    display: block;
    position: absolute;
    left: 50%;
    animation-timing-function: ease-in-out;
    animation-play-state: paused;
    animation-duration: 0.4s;
    animation-fill-mode: both;
}
.burger__bar:nth-child(1) {
    top: 25%;
    transform: translate(-50%, 0%);
}
.burger__bar:nth-child(2) {
    top: 50%;
    transform: translate(-50%, -50%);
}
.burger__bar:nth-child(3) {
    bottom: 25%;
    transform: translate(-50%, 0%);
}
.burger.close .burger__bar {
  animation-direction: reverse;
}
.burger.open .burger__bar {
    animation-direction: normal;
}
.burger.animate .burger__bar {
    animation-play-state: running;
}
.burger.animate .burger__bar:nth-child(1) {
    animation-name: default-top;
}
.burger.animate .burger__bar:nth-child(2) {
    animation-name: default-middle;
}
.burger.animate .burger__bar:nth-child(3) {
    animation-name: default-bottom;
}
.burger--merge.animate .burger__bar {
    animation-duration: 0.6s;
    animation-timing-function: ease;
}
.burger--merge.animate .burger__bar:nth-child(1) {
    animation-name: merge-top;
}
.burger--merge.animate .burger__bar:nth-child(2) {
    animation-name: merge-middle;
}
.burger--merge.animate .burger__bar:nth-child(3) {
    animation-name: merge-bottom;
}
.burger--rotate.animate .burger__bar:nth-child(1) {
    animation-name: rotate-top;
}
.burger--rotate.animate .burger__bar:nth-child(2) {
    animation-name: rotate-middle;
}
.burger--rotate.animate .burger__bar:nth-child(3) {
    animation-name: rotate-bottom;
}
.burger--spin.animate .burger__bar {
    animation-duration: 1s;
    animation-timing-function: ease;
}
.burger--spin.animate .burger__bar:nth-child(1) {
    animation-name: spin-top;
}
.burger--spin.animate .burger__bar:nth-child(2) {
    animation-name: spin-middle;
}
.burger--spin.animate .burger__bar:nth-child(3) {
    animation-name: spin-bottom;
}

/*__________________
       DEFAULT
____________________*/
@keyframes default-top {
    50% {
        top: 50%;
        transform: translate(-50%, -50%) rotate(0);
    }
    100% {
        top: 50%;
        transform: translate(-50%, -50%) rotate(-45deg);
    }
}
@keyframes default-middle {
    50%, 100% {
        visibility: hidden;
    }
}
@keyframes default-bottom {
    50% {
        bottom: 50%;
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        bottom: 50%;
        transform: translate(-50%, 50%) rotate(45deg);
    }
}
/*__________________
       MERGE
____________________*/
@keyframes merge-top {
    20% {
        top: 50%;
        transform: translate(-50%, -50%) rotate(0) scale(1, 1);
    }
    50% {
        transform: translate(-50%, -50%) rotate(0) scale(0.2, 1);
    }
    60% {
        transform: translate(-50%, -50%) rotate(-45deg) scale(0.2, 1);
    }
    100% {
        top: 50%;
        transform: translate(-50%, -50%) rotate(-45deg) scale(1, 1);
    }
}
@keyframes merge-middle {
    50% {
        transform: translate(-50%, -50%) scale(0.2, 1);
        visibility: hidden;
    }
    100% {
        visibility: hidden;
    }
}
@keyframes merge-bottom {
    20% {
        bottom: 40%;
        transform: translate(-50%, -50%) rotate(0deg) scale(1, 1);
    }
    50% {
        transform: translate(-50%, -50%) rotate(0deg) scale(0.2, 1);
    }
    60% {
        transform: translate(-50%, -50%) rotate(45deg) scale(0.2, 1);
    }
    100% {
        bottom: 40%;
        transform: translate(-50%, -50%) rotate(45deg) scale(1, 1);
    }
}
/*__________________
       ROTATE
____________________*/
@keyframes rotate-top {
    50% {
        top: 50%;
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        top: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
    }
}
@keyframes rotate-middle {
    50% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(135deg);
    }
}
@keyframes rotate-bottom {
    50% {
        bottom: 50%;
        transform: translate(-50%, 50%) rotate(0deg);
    }
    100% {
        bottom: 50%;
        transform: translate(-50%, 50%) rotate(45deg);
    }
}
/*__________________
       SPIN
____________________*/
@keyframes spin-top {
    50% {
        top: 50%;
        transform: translate(-50%, -50%) rotate(0deg);
    }
    75% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
    100% {
        top: 50%;
        transform: translate(-50%, -50%) rotate(315deg);
    }
}
@keyframes spin-middle {
    50% {
        visibility: hidden;
    }
    100% {
        visibility: hidden;
    }
}
@keyframes spin-bottom {
    50% {
        bottom: 50%;
        transform: translate(-50%, 50%) rotate(0deg);
    }
    75% {
        transform: translate(-50%, 50%) rotate(450deg);
    }
    100% {
        bottom: 50%;
        transform: translate(-50%, 50%) rotate(405deg);
    } 
}

같이 보기