HTML에서 수동으로 이미지 버튼을 넣기 위한 방법을 이해하기 위한 Snippet 이다.
CSS 의 background-image 기능을 이용해서 집어 삽입한다.
HTML
|
1
|
<input type="button" value="Add a new row" class="button-add" />
|
cs |
CSS
|
1
2
3
4
5
6
7
8
9
10
11
|
input.button-add {
background-image: url(/images/buttons/add.png); /* 16px x 16px */
background-color: transparent; /* make the button transparent */
background-repeat: no-repeat; /* make the background image appear only once */
background-position: 0px 0px; /* equivalent to 'top left' */
border: none; /* assuming we don't want any borders */
cursor: pointer; /* make the cursor like hovering over an <a> element */
height: 16px; /* make this the size of your image */
padding-left: 16px; /* make text start to the right of the image */
vertical-align: middle; /* align the text vertically centered */
}
|
cs |
참조:
http://stackoverflow.com/questions/2920076/html-css-how-to-add-image-icon-to-input-type-button