CSS로 제출 버튼을 사용자화 하는 방법

2023년 9월 21일

이 가이드를 통해 제출 버튼을 맞춤 설정하는 방법을 배우고 방문자들이 정보를 보내는 과정에서 좋은 느낌을 갖게 하여 전환율을 높일 수 있습니다.

Youtube Embed Poster: C0fzIsZA2r8

제출 버튼의 모양 변경

  1. 양식 빌더에서 양식 디자이너 아이콘을 클릭합니다.
  2. 스타일 탭으로 이동합니다.
  3. 커스텀 CSS 삽입하기 섹션까지 아래로 스크롤합니다 .
양식 빌더에서 커스텀 CSS 삽입하기 단계 스크린샷
  1. 사용자 정의 CSS 규칙을 적용하거나 다음 코드를 사용하십시오:
.form-submit-button {
background: #0066A2;
color: white;
border-style: outset;
border-color: #0066A2;
height: 50px;
width: 100px;
font: bold15px arial,sans-serif;
text-shadow: none;
}

결과는 다음과 같이 표시됩니다.:

submit-button-custom-style-min

제출 버튼의 CSS 코드 세부 정보

  • .form-submit-button – 양식의 제출 버튼에 대한 선택자입니다.
  • background – 텍스트 뒤의 배경색을 설정합니다.
  • 색상 – 텍스트의 색상을 결정합니다.
  • border-style – 제출 버튼 테두리의 스타일을 설정합니다.
  • border-color – 제출 버튼 테두리의 색상을 설정합니다.
  • height – 버튼의 높이를 설정하며 픽셀로 표시됩니다.
  • width – 버튼의 너비를 설정하고 픽셀로 표시됩니다.
  • font – 글꼴 속성을 설정합니다.

참고: 각 속성 뒤에 세미콜론(;)을 추가하는 것을 잊지 마세요.

제출 버튼 마우스 오버(호버) 효과

앞서 설명한 단계를 따라 양식 디자이너의 커스텀 CSS 삽입하기 섹션으로 이동하고 다음 코드를 삽입합니다.

.form-submit-button {
background: #B9DFFF;
color: #fff;
border: 1px solid #eee;
border-radius: 20px;
box-shadow: 5px 5px 5px #eee;
text-shadow: none;
}
.form-submit-button:hover {
background: #016ABC;
color: #fff;
border: 1px solid #eee;
border-radius: 20px;
box-shadow: 5px 5px 5px #eee;
text-shadow: none;
}

휴식 중일 때와 마우스를 올려 놓았을 때 버튼의 모양이 다음과 같이 표시됩니다:

submit-button-hover-effect-min

제출 버튼에 대한 각 CSS 코드 세부 정보

  • .form-submit-button:hover – 마우스가 제출 버튼 위에 있을 때의 클래스입니다. 다른 모든 필드는 배경을 제외하고 동일하게 유지되어 마우스 호버에서 발생하는 상황만을 보여줍니다.
  • border-radius – 제출 버튼의 모서리를 둥글게 만듭니다.
  • box-shadow – 제출 버튼의 그림자를 설정합니다.
  • text-shadow – 제출 버튼 내부의 텍스트에 대한 그림자를 설정합니다(예제에는 적용되지 않음).

어떠셨나요? 아래 의견 섹션에서 생각이나 제안을 공유해주세요.

고객지원 문의하기:

저희 고객 지원팀은 주 7일 24시간 동안 언제든지 도와드릴 수 있으며 저희의 평균 반응시간은 1~2 시간입니다.
저희 팀은 다음을 통해 연락될 수 있습니다:

Support Forum: https://www.jform.co.kr/answers/

Contact Jform Support: https://www.jform.co.kr/contact/

코멘트 보내기:

Jform Avatar
이 사이트는 reCAPTCHA 및 Google 개인정보 보호정책 정책으로 보호되며 이용약관이 적용됩니다.

Podo Comment 제일 먼저 댓글 달아주세요.