|
웹디자인에 활용도 높은 CSS3 애니메이션 버턴 모음 |
웹디자인에서 메뉴 또는 버턴은 페이지간에 상호작용을 할수 있는 중요한 요소중에 하나입니다. 인터넷이 발달하면서 일반적인 디자인보다는 다이나믹한 요소가 가미된 웹사이트가 점점 늘어나고 있는데요. 특히 플래쉬는 화려하지만 플래쉬 플레이어가 설치되어야하고 무겁다는 단점 때문에 최근들어 CSS3를 이용한 버턴 디자인이 많이 사용되고 있습니다.
오늘은 CSS3 기술을 이용한 멋진 애니메니션 CSS3 버턴을 소개해 드리겠습니다. 해당 소스를 보고 학습자료로 사용하시거나 웹사이트에 버턴을 만드실수 있습니다.
CSS3 Tricks: Animated Buttons
3가지 타입의 버턴 소스입니다. 마우스 오버시 색상, 서브텍스트, 3D 효과를 만들수 있습니다.
BonBon (Candy) Buttons
깜찍한 캔디 모양의 버턴 소스입니다. 마우스 오버시 부드럽게 색상이 변화합니다.
Making a CSS3 Animated Menu
플래쉬 효과 못지 않은 멋진 네비게이션 메뉴 소스입니다. 4가지 버턴과 홈버턴으로 구성되어 있습니다.
CSS3 Colored Buttons
마우스 클릭시 실제 버턴을 누르는듯한 효과를 만들수 있는 소스입니다. 특이하게 PSD 포토샵 원본도 제공하네요.
CSS3 Button Snippet
다양한 버턴 스타일을 선택할수 있는 생성기입니다. 바로 바로 소스를 확인할수있으면 수정도 가능합니다.
CSS3 Button Snippet
역동적인 애니메이션 효과를 만들수 있는 버턴 소스입니다. 포트폴리오 사이트 제작에 유용한 자료입니다.
CSS3 Buttons With a Glass Edge
그라데이션 색상 변화로 버턴 눌림을 표현한 소스입니다. 비교적 간단하지만 활용도 높은 자료입니다.
Animated Buttons with CSS3
총 7가지 종류의 애니메이션 버턴 소스입니다. 자연스러운 움직임과 색상변화로 웹사이트 배너 또는 메뉴로 활요도 높은 자료입니다.
CSS3 Animated Bubble Buttons
마우스 오버시 물방울 모양의 패턴이 애니메이션으로 움직이는 멋진 버턴 소스입니다. 다양한 사이즈로 구성되어 상황에 맞게 활용하시면 됩니다.
Impressive CSS3 animated button
간단한 링크연결 버턴으로 활용도 높은 소스입니다. 아래 이미지 처럼 다운로드 버턴을 마우스 오버시 위아래로 설명글을 적을수 있는 날개가 나오도록 제작되었습니다.
Radioactive Buttons
특정 행위없이 네온사인처럼 자체발광을 하는 버턴 소스입니다. 웹사이트 배너로 사용하면 눈에 잘 띌것 같습니다.
Halftone Navigation Menu With jQuery & CSS3
메뉴 버턴을 누르면 오른쪽에 이미지가 나오도록 제작된 네비게이션 메뉴입니다. 홈페이지 메인 메뉴로 활용하기 좋은 자료입니다.
CSS3 Buttons
총 12가지의 미니 버턴 소스입니다. 클래식 스타일로 무난하게 사용이 가능합니다.
Zardi Pack of CSS3 Buttons
기본형, 타원형, 사각형으로 3가지 타입의 버턴 소스입니다. 각 7가지의 색상을 선택할 수 있습니다.
UI Kit Buttons
카툰 느낌의 귀여운 애니메이션 CSS3 버턴입니다.
CSS3 Minimalistic Navigation Menu
마우스 오버시 우측으로 가이드 텍스트가 나오는 애니메이션 메뉴입니다. 웹사이트 사이드 또는 하단에 배치하면 유용한 소스입니다.
jQuery style menu with CSS3
마우스 오버시 메뉴의 크기가 커져지는 세로형 네비게이션입니다.
Just some other awesome CSS3 buttons
SAVE, NEXT, PLAY 등 미니 버턴과 소셜 미디어 버턴이 들어있는 팩키지 소스입니다.
Shiny Knob Control with jQuery and CSS3
마우스로 볼륨을 움직이면 눈금이 올라가는 컨트롤 CSS3 버턴입니다. 뮤직플레이어 느낌의 독특한 버턴을 제작할수 있는 자료입니다.
'웹통 디자인 창고 > 유용한 디자인 자료' 카테고리의 다른 글
| HTML5와 CSS3의 새로운 기능을 이용한 홈페이지 무료 템플릿 디자인 22종 (4) | 2013.10.21 |
|---|---|
| 디자이너에게 추천하는 아름다운 무료 배경 이미지 모음 (2) | 2013.08.26 |
| 빈티지 느낌이 살아있는 종이 질감 이미지 소스 모음 (8) | 2013.08.05 |
| [ 뮤직 무료 아이콘 ] 음악 컨텐츠 제작에 활용도 높은 ICON 모음 (0) | 2013.07.08 |
| 맨오브 스틸 영화 감상전 기대감을 높여주는 슈퍼맨 일러스트 모음 (0) | 2013.06.12 |
