웹사이트에 그라데이션 테두리가 있는 버튼을 추가하는 방법

Question

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

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 {
  색상: 흰색;
}

Answer 1

페이지의 원본보다 버튼을 더 크게 만들었습니다(.btn에 높이와 너비만 작성하세요).

으아악 으아악