워드프레스 너비가 화면 꽉 찬 버튼 만들기/포스트X/아이콘 줄바꿈

 

 

 

 

[꽉찬버튼+아이콘을 넣을경우- 한줄로 나오게]

/* 포스트x 꽉찬버튼 시작*/
.full-width-btn {
  display: flex; /* 아이콘과 텍스트를 가로 정렬 */
  align-items: center; /* 세로 중앙 정렬 */
  justify-content: center; /* 가로 중앙 정렬 */
  gap: 8px; /* 아이콘과 텍스트 사이 여백 조절 */
  white-space: nowrap; /* 줄바꿈 방지 */
  width: 100%; /* 버튼을 가로 전체 너비로 설정 */
  max-width: 100%; /* 부모 요소를 넘어가지 않도록 설정 */
  padding: 15px 20px; /* 버튼 내부 여백 */
  box-sizing: border-box; /* 패딩이 너비에 포함되도록 설정 */
}
/* 포스트x 꽉찬버튼 끝*/

 

 

[아이콘없이 꽉찬버튼만]

.full-width-btn {
width: 100% !important; /* 버튼 너비를 100%로 설정 */
max-width: 100% !important; /* 최대 너비 제한 해제 */
display: block; /* 블록 요소로 설정 */
text-align: center; /* 텍스트 중앙 정렬 */

아이콘 켜고, 글자 옆에 나오게, 아이콘 사이즈, 공란사이즈, 색상 등 지정함

 

 

 

미리보기 진행시 적용되어나