일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- #image
- #솔루션
- 쇼핑몰
- #홈페이지제작
- 웹솔루션
- #CSS
- #해피CGI
- #jQuery
- javascript
- #이미지
- 게시판
- php
- #쇼핑몰
- #뉴스
- #happycgi
- CSS
- 사이트제작
- 홈페이지제작
- 솔루션
- CGIMALL
- #cgimall
- happycgi
- jquery
- #업종별
- #홈페이지
- 홈페이지
- 해피CGI
- #웹솔루션
- #동영상
- 해피씨지아이
- Today
- Total
목록#button (16)
웹솔루션개발 25년 노하우! 해피CGI의 모든것
간단하지만, 유용한 input 버튼 css 입니다. 기본 시스템 input 버튼이 아닌 디자인을 하기 위한 기본적인 소스이며, 간단한 css와 javascript로 구현이 가능합니다. 별도의 프로그램 작업없이도 디자이너가 사용이 가능합니다.
다양한 형태의 마우스 오버 효과를 확인할 수 있습니다. 기본적인 형태부터 응용한 형태까지 있어 소스를 참고하기에 좋습니다
원래 하늘색이던 버튼이 마우스를 오버하면 위 이미지처럼 색과 크기가 바뀌는 효과를 낼 수 있는 소스입니다. js, css, html 파일을 사용하며 눈에 띄는 디자인이므로 포인트로 사용하기 좋을 듯 합니다.
간단한 소스를 이용하여 위 이미지와 같이 자연스러운 슬라이드 효과로 div를 숨기고 나타나게 할 수 있는 소스입니다. js, css, html 파일을 사용하며 css 스타일 수정을 통해 디자인을 수정하여 사용하면 좋을 듯 합니다.
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 태그 압축하기를 클릭하면 가로 일렬로 정돈이 되어 더욱 편리하게 사용할 수 있습니다. 하단쪽을 살펴보시면 더 많은 버튼 예제가 있어서 다양하게 이용하실 수 있습니다.
* jquery Quttons - Qunatum Paper 는 새로운 내용을 수용하기 위해 크기, 모양 및 색상을 변경할 수 있는 디지털 용지 입니다 - 버튼에 대한 시각적인 효과와 함게 메모내용을 버튼에 삽입할 수 있는 기능을 제공합니다 * 사용방법 - 첨부된 압축파일을 해제하여 웹사이트에 적용할 디렉터리에 압축을 해제하여 기본제공되는 js,css 파일을 html 문서에 삽입합니다 그이후 대화상자를 디자인하며 원하는 css 스타일을 사용하여 div 를 디자인 합니다 웹에서 URL 호출하여 실행할 경우 아래와 같은 결과를 확인할 수 있습니다
bttn.css는 버튼에 스타일을 간편하게 적용할 수 잇는 css입니다. 스타일 시트에 포함된 각 클래스명을 해당태그에 부여하여 쉽게 디자인을 적용 할 수 있습니다. 홈페이지 또는 파일을 다운받으시고 압축을 푸시면 dist폴더에서 bttn.css 또는 bttn.min.css 파일을 사용할 html 파일에 연결하시고 아래와 같이 클래스명을 적용하시고 사용하시면 됩니다. 클래스명 또는 css 소스는 bttn사이트에서 쉽게 찾고 예제를 확인하실 수 있습니다. 현재 총 13개의 버튼스타일을 제공하고 있으며 상단부분에서 컬러, 크기, block, outline을 설정하시고 확인하실 수 있습니다 적용 할 버튼을 하나 선택하시면 1번 부분에서 사용된 css코드를 확인하실 수 있고 2번 부분을 클릭하시면 적용할 htm..
다양한 버튼 이펙트 100종류를 한곳에서 확인하여 소스까지 확인하실 수 있습니다. 소스를 확인하고 싶은 버튼을 클릭하면 상세페이지로 이동하며 버튼을 확인 후 내용에 출처를 누르면 codepen 사이트로 이동하여 소스를 확인하실 수 있습니다. 코드펜 사이트에서 HTML/CSS/JS를 확인하실수 있으니 참고하여 새롭게 만들거나. 참고하시기 좋은 사이트 입니다. 사이트 제작에 많음 도움 되시길 바랍니다^^