내 문제는 버튼이 매우 작게 나타나는데 아무런 효과도 없이 아래의 높이나 너비를 조정한다는 것입니다.

Elementor를 사용하여 WordPress 사이트에 코드를 입력했습니다. HTML 위젯을 끌어서 아래 코드를 붙여넣었습니다.

.container { 높이: 100vh; 폭: 100vw; 디스플레이: 플렉스; 내용 정당화: 센터; 항목 정렬: 중앙; 배경색: 흰색; } .btn { 패딩: 20px 60px; 테두리: 없음; 개요: 없음; 위치: 상대; Z-색인: 1; 테두리 반경: 5px; 배경: 선형 그라데이션(오른쪽으로, #00FFA3, #DC1FFF); 커서: 포인터; } .btn::이전 { 콘텐츠: ""; 위치: 절대; 왼쪽: 1px; 오른쪽: 1px; 상단: 1px; 하단: 1px; 테두리 반경: 4px; 배경색: 흰색; Z-색인: -1; 전환: 200ms } .btn::이후 { 내용: attr(데이터); 글꼴 크기: 16px; 배경: 선형 그라데이션(왼쪽으로, #00FFA3, #DC1FFF); -웹킷-배경-클립: 텍스트; 색상: 투명; 전환: 200ms } .btn:hover::이전 { 불투명도: 50%; 상단: 0px; 오른쪽: 0px; 하단: 0px; 왼쪽: 0px; } .btn:hover::후{ 색상: 흰색; } 몸체.컨테이너 { 높이: 10vh; 폭: 20vw; 디스플레이: 플렉스; 내용 정당화: 센터; 항목 정렬: 중앙; 배경색: 흰색; } 본문 .btn { 패딩: 20px 60px; 테두리: 없음; 개요: 없음; 위치: 상대; Z-색인: 1; 테두리 반경: 5px; 배경: 선형 그라데이션(오른쪽으로, #00FFA3, #DC1FFF); 커서: 포인터; } 본문 .btn::이전 { 콘텐츠: ""; 위치: 절대; 왼쪽: 1px; 오른쪽: 1px; 상단: 1px; 하단: 1px; 테두리 반경: 4px; 배경색: 흰색; Z-색인: -1; 전환: 200ms; } 본문 .btn::이후 { 내용: attr(데이터); 글꼴 크기: 16px; 배경: 선형 그라데이션(왼쪽으로, #00FFA3, #DC1FFF); -웹킷-배경-클립: 텍스트; 색상: 투명; 전환: 200ms; } 본문 .btn:hover::이전 { 불투명도: 50%; 상단: 0px; 오른쪽: 0px; 하단: 0px; 왼쪽: 0px; } 본문 .btn:hover::after { 색상: 흰색; }