본문 바로가기

[CSS] '제출' 버튼을 이미지로 바꾸는 방법

2017. 12. 1. 댓글 0

가령 컨택트 폼에서 '제출' 혹은 '보내기' 버튼을 이미지로 변경하고 싶은 경우가 있습니다. 이 경우에 이용할 수 있는 CSS 코드입니다.

html 소스:

<input type="submit" id="search" name="submit" alt="search" value="">

CSS 코드:

input#search    {
background:url(../search-icon.png);
background-repeat: no-repeat;
width:40px;
height:40px;
border: 0;
}

(출처: stackoverflow)

가령 Contact Form 7의 "Send" 버튼을 아래 그림과 같이 이미지로 변경할 수 있습니다("워드프레스 '빠른 상담 신청' 컨택트 폼 작업" 참고).

※일부 글에 제휴 링크가 포함될 수 있습니다.

댓글0