웹솔루션개발 25년 노하우! 해피CGI의 모든것

원래 하늘색이던 버튼이 마우스를 오버하면 위 이미지처럼 색과 크기가 바뀌는 효과를 낼 수 있는 소스입니다. js, css, html 파일을 사용하며 눈에 띄는 디자인이므로 포인트로 사용하기 좋을 듯 합니다.

19가지의 css를 이용한 3d 형태의 버튼들을 확인하고 html 코드를 제공하고 있습니다. 자세한 소스를 보기 원하는 버튼의 link의 demo and code 버튼을 누르시면 codepne을 통해서 자세한 html 코드와 css를 확인하실 수 있습니다. 19종의 버튼중 원하는 버튼이 있다면 코드를 확인하셔서 사용하시면 됩니다 ^^ css3로 만들어진 버튼이다보니 하위버전의 브라우저에서는 사용이 불가능할수도 있겠네요

순수CSS를 이용하여 브라우저간 지원이 되는 버튼 CSS입니다. \ CSS를 이용하여 div, p, a, 버튼 등 다양한 html 요소에 적용이 가능한 버튼 CSS입니다. 둥근모서리, css그라디언트, 색상, 폰트크기, 등등 다양한 요소를 조정할 수 있습니다. 롤오버 아웃 효과도 있어서 단조롭지 않게, 사이트에 적용할 수 있습니다.

cssgenerators는 클릭만으로 디자인을 조절하여 버튼을 생성해주는 사이트입니다. 효과와 옵션을 조절하면 설정한 버튼 모양을 바로 확인할 수 있습니다. 위와 같이 css 소스를 무료로 제공하기 때문에 유용하게 사용이 가능합니다. 아래의 css 태그 압축하기를 클릭하면 가로 일렬로 정돈이 되어 더욱 편리하게 사용할 수 있습니다. 하단쪽을 살펴보시면 더 많은 버튼 예제가 있어서 다양하게 이용하실 수 있습니다.

bttn.css는 버튼에 스타일을 간편하게 적용할 수 잇는 css입니다. 스타일 시트에 포함된 각 클래스명을 해당태그에 부여하여 쉽게 디자인을 적용 할 수 있습니다. 홈페이지 또는 파일을 다운받으시고 압축을 푸시면 dist폴더에서 bttn.css 또는 bttn.min.css 파일을 사용할 html 파일에 연결하시고 아래와 같이 클래스명을 적용하시고 사용하시면 됩니다. 클래스명 또는 css 소스는 bttn사이트에서 쉽게 찾고 예제를 확인하실 수 있습니다. 현재 총 13개의 버튼스타일을 제공하고 있으며 상단부분에서 컬러, 크기, block, outline을 설정하시고 확인하실 수 있습니다 적용 할 버튼을 하나 선택하시면 1번 부분에서 사용된 css코드를 확인하실 수 있고 2번 부분을 클릭하시면 적용할 htm..

다양한 버튼 이펙트 100종류를 한곳에서 확인하여 소스까지 확인하실 수 있습니다. 소스를 확인하고 싶은 버튼을 클릭하면 상세페이지로 이동하며 버튼을 확인 후 내용에 출처를 누르면 codepen 사이트로 이동하여 소스를 확인하실 수 있습니다. 코드펜 사이트에서 HTML/CSS/JS를 확인하실수 있으니 참고하여 새롭게 만들거나. 참고하시기 좋은 사이트 입니다. 사이트 제작에 많음 도움 되시길 바랍니다^^

유명 SNS아이콘 등 다양한 버튼을 3D 효과로 나타낼 수 있는 소스를 제공해주고 있는 사이트 입니다. https://flashuser.net/tutorial/css3-social-media-buttons/

css3를 이용하여 페이퍼 형식의 디자인 버튼을 손쉽게 만들수있습니다. 페이지로 이동했을때 하단에 보시면 버튼별로 미리보기가 가능하며, 왼쪽화면에서는 HTML을 오른쪽 화면에서 CSS를 확인할 수 있습니다. 버튼의 관한 예시는 스크롤을 내리면 더 많이 확인할 수 있습니다.

다양한 디자인의 버튼을 CSS로 만드는 css3button HTML5,CSS3로 배경색상, 테두리, 그림자효과등을 손쉽게 선택하고 CSS 코드를 생성하는 사이트입니다. 위 그림과 같이 배경색상, 테두리, 바깥그림자, 안쪽 그림자, 폰트크기, 폰트그림자 효과등 다양한 설정을 클릭으로 가능합니다. 설정한 버튼 스타일시트는 위와 같이 출력되며, 해당 코드를 복사 , 붙여넣기만 하면 끝... 이미지편집을 하지 않아도 이쁜버튼을 손쉽게 만들수 있어요.. 참고로 크롬브라우저에서 접속해야 사이트 이용이 원활합니다..

원하는 버튼을 결정하신후 클릭하면 버튼의 사이즈 테두리 모서리 그림자효과 등등 자유롭게 설정이 가능합니다. 버튼의 설정이 완료가 된 후 Copy code 버튼을 클릭하면 코드가 복사됩니다. 편집프로그램을 열어 Ctrl + v를 하면 복사된 코드를 확인하실 수 있습니다.