CSS / 이미지 버튼 만들기
버튼을 꾸미는 방법 중의 하나는 이미지를 이용하는 것입니다.
- 적당한 크기의 버튼을 만듭니다.
- 그 크기에 맞는 이미지를 배경으로 정합니다.
다음은 32x32 크기의 돋보기 이미지를 이용해서 버튼을 꾸미는 예제입니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> input { vertical-align: middle; } input.form-text { border: 1px solid #bcbcbc; height: 28px; } input.img-button { background: url( "images/button_search.png" ) no-repeat; border: none; width: 32px; height: 32px; cursor: pointer; } </style> </head> <body> <form> <p> <input type="text" class="form-text"> <input type="button" class="img-button"> </p> </form> </body> </html>