워드프레스에서 버튼 CSS 디자인을 적용하는 이유는 단순히 예쁘게 보이는 것뿐만 아니라 사용자의 행동과 전환을 결정하는 핵심 요소이기 때문이다.

그래서 버튼은 크고, 눈에 띄고, 애니메이션 등을 넣어주면 효과적이다. 오늘은 CSS 코드를 추가하여 버튼 디자인을 바꿔보도로 하겠다.

버튼 CSS 디자인 수정

버튼 CSS 디자인 적용 전 버튼 모양은 위의 이미지와 같다.

버튼을 조금 더 크고, 넓고, 움직이도록 만들어보고자 한다. 바꾸는 방법은 다음과 같다.

1. 모양 > 테마 파일 편집기
2. Stylesheet 선택
3. 아래 코드 복사 붙여넣기
4. 파일 업데이트

/*버튼 CSS */
.wp-block-buttons.is-layout-flex {
    display: flex !important;
    flex-wrap: nowrap !important;
}

.wp-block-buttons.is-layout-flex > .wp-block-button {
    flex: 1 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}

.wp-block-button__link.wp-element-button {
  display: inline-block !important;
  width: 100% !important;
  padding: 15px 0 !important;
  font-size: 22px !important;
  text-align: center !important;
  text-decoration: none !important;
  color: #fff !important;
  border: none !important;
  border-radius: 15px !important;
  font-weight: bold !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: all 0.4s ease !important;
  animation: pulse 2s infinite !important;
  box-sizing: border-box !important;

  background: linear-gradient(to bottom, #0272D2 5%, #09AECF 100%) !important;
  box-shadow: 0 0 25px rgba(0, 120, 230, 0.45) !important;
}

/* hover 효과 */
.wp-block-button__link.wp-element-button:hover {
  transform: scale(1.03);
  background: linear-gradient(to bottom, #09AECF 5%, #0272D2 100%) !important;
  box-shadow: 0 0 25px rgba(0, 120, 230, 0.45) !important;
  color: #fff !important;
}

/* pulse 애니메이션 */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

전체적인 코드에 대한 자세한 설명은 생략한다.

여기서 본인 취향에 맞게 색깔로 수정하고 싶은 분들은 #0272D2, #09AECF 칼라 코드만 변경하면 된다. 그리고 해당 코드를 입력했는데 반영이 안되는 분들은 이전 글을 확인해보길 바란다.

지금 위의 버튼 디자인이 방금 설정한 코드이다. 다음에는 소제목 부분을 수정해보도록 하겠다.