요즘에는 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 사이트에 이런저런 단어로 검색하면 많이 나오니 참고하세요^^
와 대박 이런 양질의 글에 댓글이 없는것도 신기하네요 최곱니다 정말로!
앗^^ 이상덕님 방문, 댓글 감사합니다 ㅎ
그렇게 생각해주시니 감사~
도움이 되셨으면 쉐어 부탁드립니다^^