버튼의 다양한 종류와 효과주기 모음
Codepen에서 간추린 CSS에 참조할 수 있는 스타일리쉬한 버튼(Button) 디자인 모음입니다.
버튼의 다양한 종류와 효과주기 등을 살펴보세요.
모던한 버튼 스타일
모던하면서 스타일리쉬한 버튼 디자인 모음입니다.
다음은 모던하면서 플랫한 디자인 버튼 모음입니다.
다음은 일반적이면서도 무난한 그라디언트가 살짝 있는 버튼 모음입니다.
다음은 Black&White 버튼 모음입니다. 간결하면서 깔끔한 스타일이 적용되어 있습니다.
버튼에 효과주기
호버 등 효과주기가 매우 매력적인 버튼의 모음입니다.
다음의 버튼은 호버 시 매우 스타일리쉬하면서도 글리치(Glitch, 화면이 지지직 거리는듯한) 효과가 있는 버튼입니다. 이 버튼은 스타일시트로만 구현되지는 않고 스크립트를 같이 활용해서 구현합니다. 스타일시트은 Sass 언어로 구현되어 있어서 CSS로 포맷한 코드를 예제 밑에 첨부하였습니다.
위 예제의 Sass 언어로 구현되어 있는 스타일시트를 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로 포맷한 코드입니다.
.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로 포맷한 코드입니다.
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);
}
}
같이 보기
- CSS 라디오 버튼을 커스텀 스타일링하는 방법
- CSS 체크박스(checkbox) 커스텀 스타일링하는 방법
- HTML <a> 태그 - 올바른 이해와 사용 방법
- HTML <button> 태그 - 올바른 이해와 사용 방법
- CSS :hover 가상 클래스 선택자 사용 방법
- CSS :active 가상 클래스 선택자 사용 방법
- CSS :checked 가상 클래스 선택자 사용 방법
- CSS ::after 가상 요소 선택자 사용 방법
- CSS ::before 가상 요소 선택자 사용 방법
- CSS 다음 형제 선택자 (+) – 요소 바로 뒤에 있는 타깃 형제 요소를 선택