요즘에는 html, css, js등의 코드를 공개하여 모두가 함께 쓸 수 있도록 공유하는 사이트가 무척 많아졌습니다.
그 중에도 제가 자주 체크하는 사이트가 코드펜(codepen)이라는 사이트인데
오늘은 css로 꾸민 버튼 디자인을 모아 보았습니다. 복사+붙여넣기로 활용하실 수 있겠습니다.
그 중에도 제가 자주 체크하는 사이트가 코드펜(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
댓글
웹 공부 중인데 감사히 쓰겠습니다!
잘 사용하시고 공부 열심히 하셔요^^
웹 개발 공부하면서, 사이트를 하나 만들고 있는데, 버튼 디자인을 사용해도 될지 여쭙고 싶네요!
물론입니다^^ 자유롭게 사용하셔요 ㅎ
좋은 정보 감사합니다 혹시 이버튼들은 익스에 적용 할수 없나요?
소스적용하고 크롬에서는 적용되는걸 확인했는데 익스에서는 효과가 다먹질 않네요?
Transitional Buttons 로 테스트 해보았습니다.
아.. 안타깝지만 개중에 몇 버튼들은 익스에 적용할 수 없게끔 되어있습니다.
익스에서 지원하지 않는 기능들을 사용하고 있는거라서요!
진짜 지리고 갑니다.. 감사합니다…
감사합니다~
질문 한개만 할께요 ^^
12가지 버튼중에 5번버튼에 태그안에 링크를 걸었는데 안먹히는데 혹시 링크거는 방법이 따로 있을까요?
hhhh
hhhh
안녕하세요!! 방문감사합니다~!
답이 늦었네요. 매일 확인하지 않는지라 ㅠ ㅠ
a태그 안에 링크를 넣어주셔야 됩니다!
여기 올려놓은 버튼들은 디자인만 표현된거라 링크까진 걸려있지 않을거예요
<a href=”링크주소”>버튼</a>
요러케 써주셔야해요!
감사합니당 ! 잘쓸게요!
넵^^ 잘 쓰셔용 ㅎㅎ
안녕하세요~ 저는 한국에서 디자이너로 활동하고 있는데요
회사에서 코딩으로 홈페이지를 만드는데 많은 어려움이 있어서 블로그 방문하고 가요
정말 멋진 버튼들이 많네요
안녕하세요^^ 찾아주셔서 감사해요~
도움이 되었다니 저도 기쁩니다~~
적용하는 방법이 어떻게 되나요..ㅜ
그냥 html에 복사하고 css는 따로 css파일 만들어서
html 파일이랑 같은 폴더에 위치시켰는데 안되네요 초보라서 ㅜㅜ
html에 css를 읽을 수 있도록 불러오셨죠?
같은 폴더에 있다고 읽어올 수 있는건 아니니까요~
어디가 어떻게 문제인지가 실제로 보지 않고는 정확한 답변을 드리기가 어려워요^^
테스트로 올리신 파일이 있으면 링크를 알려주세요.
이쁜버튼들이 많네요 ㅎㅎ
최근 웹프로그래밍 시작했는데요
audio태그를 이용하여 음악을 재생했을 때
이버튼들을 다른이미지 파일로 변경할 수 없을까? 라는 생각을 해봤는데
구글링을 열심히 해봐도 알 수가 없네요.
ㅎㅎ
혹시 아신다면 좀 가르쳐 주실 수 있나요?
안녕하세요^^ 방문, 댓글 감사합니다!
audio태그 관련 질문에 관해서는 저도 잘 모르는데
검색을 해보니 http://kolber.github.io/audiojs/
js/css 를 이용해서 디자인을 바꿀 수가 있어보이네요!
사이트 보시고 연구해보세요^^
nanati님 정말 감사합니다.
이제막 입문에 독학이라 그냥 막막했는데 큰도움이 될것 같습니다.
^^
하연님, 방문, 댓글 감사합니다^^
제 블로그가 도움이 되셨다니 너무 기쁘네요~
요새 바쁘다는 핑계로 좀 뜸하긴한데..
종종 업데이트 하도록 노력해볼게요^^
반응형 테이블 검색하다가 넘어왔는데 보고 감탄했네요
이런건 어떻게 구상해서 만드신건지.. 천재 아니신가요
파이리님 방문, 댓글 감사합니다^^
글 내용에도 썼는데, 제가 직접 만든 것은 아니고
코드펜이라는 사이트에서 쓸만한 버튼을 찾아 쉐어 한거예요^^
더 많은 자료를 찾아보시고 싶으시면 코드펜에 방문해보세요!
가끔 버튼 이펙트를 만들 때 무슨 프로퍼티를 써야할지 막막했는데 정리되어있어서 도움이 되었습니다.
방문 댓글 감사해요^^ 도움이 되었다니 저도 기쁩니다!
좋은 정보, 자료들 많네요. 잘보고 갑니다. 또 올게요.
방문, 코멘트 감사해요^^~ 또 오세요~
감사합니당 잘쓸게요!!
-^^- 감사합니다~
헙…………………….. 검색해서 들어왔는데 나나티님이셨어..ㅋㅋㅋ
무쟈게 방갑네요 ㅋㅋ
방가방가방가워요^^
제 사이트가 검색에 잘 걸리는 것 같아요 ㅋㅋㅋ
역시 구글느님~
저기 그 버튼이 눌렸을때 이동하는 사이트는 어떻게 하나요?
방문, 댓글 감사합니다.
질문이 잘 이해가 안되는데요…
버튼이 눌렸을 때 이동하는 사이트라니 무슨 말씀이신지..?
버튼을 눌렀을때 사이트로 이동하고 싶으시다는 말씀이신가요??
버튼에 a태그를 설정해주시면 됩니다.
검색하다보니 아는분 홈에 걸리다니…
잘사용 하겠습니다. ^^
제 블로그가 검색에 잘 걸리는가 봅니다 ㅎㅎ
난나티님 버튼 css 잘사용하겠습니다~!
항상 sir에서 지켜보고있어요!!
헙! 지훈님 누구신지 모르겠지만,
방문 댓글 감사하고, 자주 놀러오세욥^^
nanati 님 css 잘 활용했습니다
댓글도 달아주셨군요 감사합니다 ㅋㅋ
즐찾하시고 자주 들러주세요 ~ ㅡ,. ㅡ
음….제일첫번째 버튼은… backgroundcolor도 안되어있는데 색이번하는건가요…ㅠㅡㅠ 모르겟어요ㅜㅜ
background-color 말고 box-shadow로 표현하고 있어서 그래요^^
box-shadow사이즈를 변경해서 마우스를 올려놨을 때 색이 채워지는 형식입니다~
진짜 너무 많은 도움이 되었습니다 !! 감사합니다 ^^ !!
아이구~ 감사합니다^^
도움이 되셨다니 제가 더 기쁩니다^^
개발자인데 너무 좋은 정보에요!!
감사합니다.
댓글 감사합니다 ^^
도움이 되셨다니 기쁘네요~ ㅎ
안녕하세요 저는 개발자인데 CSS쪽 정보가 부족합니다
혹시 다른 사이트들도 알고계시면 알려주실 수 있으신가요?
정확히 어떤 사이트를 원하시는지 모르겠네요^^;
codepen.io 사이트에 이런저런 단어로 검색하면 많이 나오니 참고하세요^^
와 대박 이런 양질의 글에 댓글이 없는것도 신기하네요 최곱니다 정말로!
앗^^ 이상덕님 방문, 댓글 감사합니다 ㅎ
그렇게 생각해주시니 감사~
도움이 되셨으면 쉐어 부탁드립니다^^