버튼을 만들어 주는 사이트
- 퍼블리셔/도구
- 2011. 2. 25. 06:00
버튼을 만드는 방법은 참 여러가지 입니다.
html 과 css 를 활용해서 만드는 방법이 있구요.
요즘에는 css 3 를 이용한 방법도 많이 눈이 띄더군요. 헌데 이번에 소개하는것은 단순이 선택만 하면 그럴싸한 버튼을 즉석에서 만들어 주는 사이트 입니다.
사설접고 사이트 주소 날립니다. => http://www.performable.com/buttons/
버튼 스타일에도 여러가지가 있으니 이것 저것 클릭해보세요.
저는 Transparent 로 선택하고 아래처럼 선택하고 다운로드 버튼을 한번 만들어 봤습니다.
Build my Button 을 클릭하시면 이메일로 코드가 옵니다.
회원가입같은거 필요없이 바로 사용할수 있습니다.
메일을 열어보시면 아래처럼 주소가 있을겁니다. 접속해보세요.
그럼 아까 만든 버튼이 있군요. css 코드가 아닌 자바스크립트로 되어 있습니다.
한번 코드를 넣어보겠습니다. 예제로.
저의 경우에는 a 링크에는 link.gif 라는 이미지가 적용이 되어 있습니다.
그래서 다운로드 버튼이 안나오는군요.
파이어폭스로 한번 열어봤습니다.
보시다시피 link.gif 이미지가 배경으로 지정되어 잇어서 우측 아래 빨강색 이미지가 보이지 않는겁니다.
이런경우 우측 빨강색안에 있는 스타일이 지정되어있고 이것이 상속이 되어 안나오는겁니다.
그러때는 !important 로 설정하시면 됩니다.
좀 번거로운 단점이 있네요. 이글을 위해 따로 설정을 해주었습니다.
저의 경우에는 글쓰기 창에 아래의 코드를 넣었습니다.
<style type="text/css">
#super-conversion-button.transparent.red {
background-image: url("//d1nu2rn22elx8m.cloudfront.net/buttons/resources/images/transparent-red.png") !important;
background-position: left top !important;
background-repeat: no-repeat !important;
}
</style>
하지만 간단한 방법을 소개하려고 했던 저의 취지에 좀 어긋나는군요. 다른 방법은 2편으로 넘기겠습니다.