출처 : http://blog.fonts.kr/?p=431
안녕하세요.
nFont 블로그지기입니다~ 오늘은 웹페이지에서 빠질 수 없는 인터랙션 UI 버튼에 대한 이야기를 할까하는데요. 예전에는 이미지작업을 통해 버튼을 만들었다면 요즘 추세는 CSS3를 이용해 버튼을 많이 만들고 있지요.
하지만 코드를 직접 입력해야하는 CSS 특성상 이미지처럼 쉽게 작업을 할 수는 없었는데요.
이런 불편함을 싹~ 잊게 해줄 사이트들을 소개합니다.
CSS Button Generator
처음으로 소개해드릴 사이트입니다. 특이점으로는 플러그인 형식으로 크롬에 설치할 수 있습니다. 작업 중에 광고가 신경쓰이신다면 상단 메뉴에 [Hide the Ads] 버튼을 누르시면 광고가 안보인답니다~
Button X
좌측에 다양한 프리셋을 제공하는게 특징입니다. 역시 크롬 플러그인을 제공하네요.
설정을 완료하시고 생성된 버튼을 클릭하시면 소스코드를 얻으실 수 있습니다.
CSS3 Button Generator
같은 이름 다른 사이트네요.
만든 버튼을 저장하고 다른 사람들과 공유할 수 있습니다. 쇼케이스 메뉴에서는 다른 사람들이 먼저 만들어서 저장&공유한 버튼들을 구경할 수도 있네요.
CSS Gradient Button
CSSButton
세분화된 메뉴 단계를 거치며 쉽게 버튼을 생성할 수 있게 도와줍니다.
왼쪽 상단에 Design 탭에서 설정을한 후, CSS 탭을 누르면 소스를 볼 수 있습니다.
버튼의 Normal, Hover(마우스 오버 상태), Active(클릭 상태)에 따라 각기 설정을 다르게 할 수도 있습니다.
