[CSS] 화려한 색상의 그라데이션 컬러 버튼(button) 디자인 모음

Doyeon0430 | 2023년 08월 13일

이번시간에는 애니메이션과 그라데이션 효과가 들어간 버튼 디자인들을 소개하겠습니다.

총 4가지의 컬러를 가지고 왔으며 2개의 색상으로 제작된 그라데이션 컬러입니다.

CSS의 before 기능과 hover 기능을 추가해 마우스를 버튼에 올렸을 때 모션이 나타나도록 구현했습니다.

버튼(button) 디자인 - 그라데이션 효과 1
버튼(button) 디자인 - 그라데이션 효과 2
버튼(button) 디자인 - 그라데이션 효과 3
버튼(button) 디자인 - 그라데이션 효과 4

1. 버튼(button) 디자인 - 그라데이션 효과 1

첫 번째 디자인은 초록계열 색상의 그라데이션 버튼입니다.

linear-gradient 함수를 사용해 위에는 #a8c461 색상을 아래에는 #36cd9c 색상을 사용했습니다.

See the Pen <a href="https://codepen.io/doyeon-kim-the-animator/pen/eYQqmzP"> Untitled</a> by doyeon kim (<a href="https://codepen.io/doyeon-kim-the-animator">@doyeon-kim-the-animator</a>) on <a href="https://codepen.io">CodePen</a>.

2. 버튼(button) 디자인 - 그라데이션 효과 2

두 번째 디자인은 빨강계열 색상의 그라데이션 버튼입니다.

linear-gradient 함수를 사용해 위에는 #df6464 색상을 아래에는 #cd36bd 색상을 사용했습니다.

See the Pen <a href="https://codepen.io/doyeon-kim-the-animator/pen/KKrOwVQ"> Untitled</a> by doyeon kim (<a href="https://codepen.io/doyeon-kim-the-animator">@doyeon-kim-the-animator</a>) on <a href="https://codepen.io">CodePen</a>.

3. 버튼(button) 디자인 - 그라데이션 효과 3

세 번째 디자인은 파랑계열 색상의 그라데이션 버튼입니다.

linear-gradient 함수를 사용해 위에는 #6164c4 색상을 아래에는 #36b2cd 색상을 사용했습니다.

See the Pen <a href="https://codepen.io/doyeon-kim-the-animator/pen/JjegoKQ"> Untitled</a> by doyeon kim (<a href="https://codepen.io/doyeon-kim-the-animator">@doyeon-kim-the-animator</a>) on <a href="https://codepen.io">CodePen</a>.

4. 버튼(button) 디자인 - 그라데이션 효과 4

네 번째 디자인은 노랑계열 색상의 그라데이션 버튼입니다.

linear-gradient 함수를 사용해 위에는 #c4c361 색상을 아래에는 #cdac36 색상을 사용했습니다.

See the Pen <a href="https://codepen.io/doyeon-kim-the-animator/pen/MWzNYjB"> Untitled</a> by doyeon kim (<a href="https://codepen.io/doyeon-kim-the-animator">@doyeon-kim-the-animator</a>) on <a href="https://codepen.io">CodePen</a>.

글을 마치며 다양한 그라데이션 색상의 버튼 디자인을 알아봤습니다.

댓글이 없습니다.

간편 댓글 작성