UI: 튼튼한 CSS Button 만들기

웹표준/쇼케이스 2008. 3. 12. 14:04

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 
 
[##_http://kmoonki.tistory.com/script/powerEditor/pages/1C%7C498bc00fea4cfEJ.png%7Cwidth=%22460%22%20height=%22112%22%20alt=%22%22%20filename=%229-cell.png%22%20filemime=%22%22%7C_##]

*Button Templates
- Simply-Button v2
- Top 10 CSS Buttons Tutorials List
-
Free High-Gloss Graphite Buttons 
-
77 Vector Buttons hot off the press
- 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! 
- 20 More CSS3 Tutorials and Techniques for Creating Buttons 
- CSS3 Pictogram Button 
- UI Design: Glossy Buttons With CSS3 Gradient   
- 24 Free CSS and PSD Buttons for Websites Layouts   




 

'웹표준 > 쇼케이스' 카테고리의 다른 글

Step Menu  (0) 2008.05.03
CSS Form Showcase  (0) 2008.04.30
UI: 튼튼한 CSS Button 만들기  (4) 2008.03.12
이미지 갤러리  (0) 2008.03.05
UI: border - 둥근모서리 (Rounded Corners)  (0) 2008.03.04
Chart & Graph  (2) 2008.03.04
  • 세슈 2008.03.15 21:32 ADDR 수정/삭제 답글

    와.. 버튼이 깔끔하면서도 눈길을 끄네요! 좋은 정보 고맙습니다!

    • Favicon of https://kmoonki.tistory.com BlogIcon 자리끼 2008.03.17 14:01 신고 수정/삭제

      내용에 맞도록 응용하면 멋진 Button을 만들 수 있습니다.^^

  • Favicon of http://vaslor.net BlogIcon VL 2011.01.20 20:27 ADDR 수정/삭제 답글

    정리가 잘 되어 있네요.. 감사합니다.