다이나믹한 느낌의 CSS3 애니메이션 버턴 무료 소스

 

 

 

 

 

 

 

 

웹디자인에 활용도 높은 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 버턴입니다. 뮤직플레이어 느낌의 독특한 버턴을 제작할수 있는 자료입니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

<관련글>

2013/01/15 - [ 웹사이트 포토샵 버턴 소스 ] 직관적으로 설계된 홈페이지 네비게이션 버턴 모음

2012/02/29 - [ 포토샵 버턴 ] UI 컨트롤러 디자인 버턴

2012/08/07 - 간단하게 웹싸이트 또는 어플을 미리 만들어볼수 있는 무료 Mockup 툴

2012/02/07 - 웹디자인에서 자주쓰이는 리본만들기 (원본소스 포함)

2011/12/28 - 홈페이지 인터페이스 정말 쉽게 만들어보자

2013/07/26 - 자주 사용되는 5가지의 포토샵 배경 패턴 만들기 강좌

2013/07/11 - 각종 웹 브라우저 템플릿 포토샵 무료 PSD 소스 12종

이 글을 공유하기

댓글

Designed by JB FACTORY