버튼 만들어 주는 사이트 2편
- 퍼블리셔/도구
- 2011. 2. 25. 06:00
이전글에서 버튼을 만들어 주는 사이트를 소개했습니다.
본문의 a 링크에 스타일이 지정이 되어있지 않으면 간단이 자바스크립트 한줄로 해결이 됐지만 스타일이지정이 되어 있는경우는 중복으로 인해 !important 속성을 따로 추가해주어야 했습니다.
아래방법은 자바스크립트를 사용하지 않고 이미지를 다운로드 받아서 사용하는 방법입니다.
해서 배경이미지주소로 접속을 해보았습니다.
다운로드 받았습니다.
그럼 class를 하나 만듭니다.
!! 치환자의 경우 ##_치환자_## 는 #\#_치환자_## 로 표시됩니다.!!
<div class="download_button">
<p class="button">Download</p>
<p>이글을 드레그해서 파일업로드하세요.</p>
</div>
.download_button {
width:300px;
}
.download_button p.button{
background:url("http://d1nu2rn22elx8m.cloudfront.net/buttons/resources/images/transparent-red.png") no-repeat 0 0;
width:170px;
height:50px;
padding-top:20px;
text-align:center;
color:#fff;
}
.download_button p.button:hover{
background-position:0 -70px;
color:#000;
}
이런식으로 사용하면 됩니다.
제가 예제로 버튼 몇개를 올려봅니다.