1. 버튼의 바탕색상 변경 또는 Input, 테이블 가능(마우스 오버시)
<input type=button value=submit onMouseOver="this.style.backgroundColor='blue'" onMouseOut="this.style.backgroundColor=''">
<input type=button value=submit onMouseOver="this.style.backgroundColor='blue'" onMouseOut="this.style.backgroundColor=''">
2. INPUT 마우스 오버시 테두리 색상 변경
style='border:;width:100px;height:16;' onMouseOver="this.style.border='1 solid #99CC00'" onMouseOut="this.style.border=''"
출처 - http://town.pingstudy.com/bbs/board.php?bo_table=info_plaza&wr_id=25&sca=CSS&pcode=
===================================================================================
CSS를 활용하여 쉽게 제작하는 버튼입니다.
버튼 이미지 위에 표현되는 제목에 따라 버튼 이미지를 제작하기 보다는 사용을 위한 종류의 이미지 (버튼 밑그림) 에 Text
제목을 사용하여 만들어지는 버튼은 활용범위가 넓을 뿐 아니라 버튼 제작시간을 단축시켜 줍니다. 많은 예제중 활용도가 높아 보이는
방법을 소개합니다.
그러나 IE6에선 다소 문제가 있습니다. ㅠㅠ
01. CSS Sliding Door using only 1 image
URL : http://kailoon.com/css-sliding-door-using-only-1-image/
아쉬운점 : 이미지 모서리를 투명처리 하면 겹쳐 나타나게 되어 보기가 쩜 그렇다..
02. CSS Oval Buttons
URL : www.dynamicdrive.com/style/csslibrary/item/css_oval_buttons/
03. Rediscovering the Button Element
URL : particletree.com/features/rediscovering-the-button-element/
04. Bold CSS Buttons
URL#1 : www.dynamicdrive.com/style/csslibrary/item/bold_css_buttons/
URL#2 : www.dynamicdrive.com/style/csslibrary/item/vista_aero_buttons_menu/
05. Recreating the button
URL : stopdesign.com/archive/2009/02/04/recreating-the-button.html
- Simply-Button v2
- Top 10 CSS Buttons Tutorials List
- Free High-Gloss Graphite Buttons
- CSS Square buttons
- 45 Photoshop Tutorials for Better Navigation [button]
- Styling the button element with sliding doors
- Make fancy buttons using CSS sliding doors technique
- Liquid & Color Adjustable CSS Buttons
- Skinnable Web 2.0 Button
- ButtonReplacement.JS
- Stylish Submit Buttons
- www.webreference.com/programming/css_stylish/
- [beginner] Create a Button with Hover and Active State using CSS Sprites
- [CSS3] Super Awesome Buttons with CSS3 and RGBA
- [CSS3] Creating a Realistic Looking Button with CSS3
- [CSS3] An Introduction to CSS3 - Creating a Button
- [CSS3] Pretty CSS3 buttons
- [CSS3] 12 Excellent CSS3 Button and Menu Techniques
- [CSS3] CSS3 Gradient Buttons
- [CSS3] CSS3 Button Tutorials and Techinques Revisited
- [CSS3] CSS3 Buttons Without Any Images
- [CSS3] Cross-browser CSS gradient buttons
- [CSS3] CSS3 Facebook Buttons
- [CSS3] CSS3 GitHub Buttons
- [CSS3] CSS3 Button UI
- CSS3 Buttons - 10+ Awesome Ready-To-Use Solutions
- Creating CSS3 Buttons: Techniques, Tutorials, Tools
- Create Multi Color and Size CSS3 Buttons
- Create a Slick CSS3 Button with box-shadow and rgba
- [framework] CSS3 Buttonize Framework
- CSS3 Brushed Metal Button
- Just some other awesome CSS3 Buttons
- How To Create A Clean And Stylish CSS3 Menu
- Google+ Styled Buttons
- All About Buttons: Inspiration, PSDs for Download, CSS Generators and Frameworks
- CSS And CSS3 Buttons, 110 Best Sets!
- Creating bulletproof graphic link buttons with CSS
- Web Desgin Trends: Call To Action Buttons
- 24 Essential Submit Button Enhancements
- 22 CSS Button Styling Tutorials and Techniques
- How to Design Buttons to Help Improve Usability
- 15 Tips and Techniques for Styling the button element
- Designing CSS Buttons: Techniques and Resources
- Ultimate Collection of Free Buttons in PSD Format
- 20 Awesome jQuery Enhanced CSS Button Techniques
- [site] We Love Buttons
- Code an Awesome Animated Download Button With CSS3
2008/06/07 - [웹표준] - Input button vs. Button
2008/04/30 - [웹표준/쇼케이스] - CSS Form Showcase
2008/02/27 - [웹표준/쇼케이스] - Form CSS
출처 - http://kmoonki.tistory.com/231
==================================================================================
CSS3 Gradient Buttons
출처 - http://www.webdesignerwall.com/demo/css-buttons.html
'Development > CSS' 카테고리의 다른 글
| css - 드롭다운 메뉴 (0) | 2012.05.29 |
|---|---|
| CSS - 선택자 (0) | 2012.05.23 |
| CSS - 정리 (0) | 2012.05.13 |
| CSS - em 단위 (0) | 2012.05.13 |
| CSS - 글자 레이아웃 속성 (0) | 2012.05.12 |
