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. 여비 댓글:

    감사합니다~
    질문 한개만 할께요 ^^

    12가지 버튼중에 5번버튼에 태그안에 링크를 걸었는데 안먹히는데 혹시 링크거는 방법이 따로 있을까요?

    hhhh
    hhhh

    • nanati 댓글:

      안녕하세요!! 방문감사합니다~!
      답이 늦었네요. 매일 확인하지 않는지라 ㅠ ㅠ

      a태그 안에 링크를 넣어주셔야 됩니다!
      여기 올려놓은 버튼들은 디자인만 표현된거라 링크까진 걸려있지 않을거예요
      <a href=”링크주소”>버튼</a>
      요러케 써주셔야해요!

  2. 댓글:

    감사합니당 ! 잘쓸게요!

  3. 김지현 댓글:

    안녕하세요~ 저는 한국에서 디자이너로 활동하고 있는데요
    회사에서 코딩으로 홈페이지를 만드는데 많은 어려움이 있어서 블로그 방문하고 가요
    정말 멋진 버튼들이 많네요

  4. lioil55 댓글:

    적용하는 방법이 어떻게 되나요..ㅜ
    그냥 html에 복사하고 css는 따로 css파일 만들어서
    html 파일이랑 같은 폴더에 위치시켰는데 안되네요 초보라서 ㅜㅜ

    • nanati 댓글:

      html에 css를 읽을 수 있도록 불러오셨죠?
      같은 폴더에 있다고 읽어올 수 있는건 아니니까요~
      어디가 어떻게 문제인지가 실제로 보지 않고는 정확한 답변을 드리기가 어려워요^^
      테스트로 올리신 파일이 있으면 링크를 알려주세요.

  5. 장하연 댓글:

    이쁜버튼들이 많네요 ㅎㅎ
    최근 웹프로그래밍 시작했는데요
    audio태그를 이용하여 음악을 재생했을 때
    이버튼들을 다른이미지 파일로 변경할 수 없을까? 라는 생각을 해봤는데
    구글링을 열심히 해봐도 알 수가 없네요.
    ㅎㅎ
    혹시 아신다면 좀 가르쳐 주실 수 있나요?

    • nanati 댓글:

      안녕하세요^^ 방문, 댓글 감사합니다!
      audio태그 관련 질문에 관해서는 저도 잘 모르는데
      검색을 해보니 http://kolber.github.io/audiojs/
      js/css 를 이용해서 디자인을 바꿀 수가 있어보이네요!
      사이트 보시고 연구해보세요^^

      • 장하연 댓글:

        nanati님 정말 감사합니다.
        이제막 입문에 독학이라 그냥 막막했는데 큰도움이 될것 같습니다.
        ^^

        • nanati 댓글:

          하연님, 방문, 댓글 감사합니다^^
          제 블로그가 도움이 되셨다니 너무 기쁘네요~
          요새 바쁘다는 핑계로 좀 뜸하긴한데..
          종종 업데이트 하도록 노력해볼게요^^

  6. 파이리 댓글:

    반응형 테이블 검색하다가 넘어왔는데 보고 감탄했네요
    이런건 어떻게 구상해서 만드신건지.. 천재 아니신가요

    • nanati 댓글:

      파이리님 방문, 댓글 감사합니다^^
      글 내용에도 썼는데, 제가 직접 만든 것은 아니고
      코드펜이라는 사이트에서 쓸만한 버튼을 찾아 쉐어 한거예요^^
      더 많은 자료를 찾아보시고 싶으시면 코드펜에 방문해보세요!

  7. 이동헌 댓글:

    가끔 버튼 이펙트를 만들 때 무슨 프로퍼티를 써야할지 막막했는데 정리되어있어서 도움이 되었습니다.

  8. ZENEZ 댓글:

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

  9. 박재성 댓글:

    감사합니당 잘쓸게요!!

  10. 닥본사 댓글:

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

  11. 이현수 댓글:

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

    • nanati 댓글:

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

  12. 헌이 댓글:

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

  13. 지훈 댓글:

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

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

  14. 해피정 댓글:

    nanati 님 css 잘 활용했습니다

  15. 권영민 댓글:

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

    • nanati 댓글:

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

  16. 손정은 댓글:

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

  17. 리엔 댓글:

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

  18. 반갑습니다 댓글:

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

    • nanati 댓글:

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

  19. 이상덕 댓글:

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

    • nanati 댓글:

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