css 버튼 디자인 모음

SHARE

요즘에는 html, css, js등의 코드를 공개하여 모두가 함께 쓸 수 있도록 공유하는 사이트가 무척 많아졌습니다.
그 중에도 제가 자주 체크하는 사이트가 코드펜(codepen)이라는 사이트인데
오늘은 css로 꾸민 버튼 디자인을 모아 보았습니다. 복사+붙여넣기로 활용하실 수 있겠습니다.

Transitional Buttons

12가지 패턴의 버튼

Button Hover Effects

Button with simple effect on hover!

제 사이트에서 활용하고 있는 버튼 디자인입니다.

Animated CSS3 Buttons

Cool Buttons

사이즈별로 만들어져 있어 사용이 편리합니다.

Button Hover Effect

CSS Buttons hover effects

the fun button

Flat responsive buttons

댓글

  1. ZENEZ 댓글:

    좋은 정보, 자료들 많네요. 잘보고 갑니다. 또 올게요.

  2. 박재성 댓글:

    감사합니당 잘쓸게요!!

  3. 닥본사 댓글:

    헙…………………….. 검색해서 들어왔는데 나나티님이셨어..ㅋㅋㅋ
    무쟈게 방갑네요 ㅋㅋ

  4. 이현수 댓글:

    저기 그 버튼이 눌렸을때 이동하는 사이트는 어떻게 하나요?

    • nanati 댓글:

      방문, 댓글 감사합니다.
      질문이 잘 이해가 안되는데요…
      버튼이 눌렸을 때 이동하는 사이트라니 무슨 말씀이신지..?
      버튼을 눌렀을때 사이트로 이동하고 싶으시다는 말씀이신가요??
      버튼에 a태그를 설정해주시면 됩니다.

  5. 헌이 댓글:

    검색하다보니 아는분 홈에 걸리다니…
    잘사용 하겠습니다. ^^

  6. 지훈 댓글:

    난나티님 버튼 css 잘사용하겠습니다~!

    항상 sir에서 지켜보고있어요!!

  7. 해피정 댓글:

    nanati 님 css 잘 활용했습니다

  8. 권영민 댓글:

    음….제일첫번째 버튼은… backgroundcolor도 안되어있는데 색이번하는건가요…ㅠㅡㅠ 모르겟어요ㅜㅜ

    • nanati 댓글:

      background-color 말고 box-shadow로 표현하고 있어서 그래요^^
      box-shadow사이즈를 변경해서 마우스를 올려놨을 때 색이 채워지는 형식입니다~

  9. 손정은 댓글:

    진짜 너무 많은 도움이 되었습니다 !! 감사합니다 ^^ !!

  10. 리엔 댓글:

    개발자인데 너무 좋은 정보에요!!
    감사합니다.

  11. 반갑습니다 댓글:

    안녕하세요 저는 개발자인데 CSS쪽 정보가 부족합니다
    혹시 다른 사이트들도 알고계시면 알려주실 수 있으신가요?

    • nanati 댓글:

      정확히 어떤 사이트를 원하시는지 모르겠네요^^;
      codepen.io 사이트에 이런저런 단어로 검색하면 많이 나오니 참고하세요^^

  12. 이상덕 댓글:

    와 대박 이런 양질의 글에 댓글이 없는것도 신기하네요 최곱니다 정말로!

    • nanati 댓글:

      앗^^ 이상덕님 방문, 댓글 감사합니다 ㅎ
      그렇게 생각해주시니 감사~
      도움이 되셨으면 쉐어 부탁드립니다^^