웹사이트에 그라데이션 테두리가 있는 버튼을 추가하는 방법
P粉621033928
P粉621033928 2023-09-05 20:41:10
0
1
559
<p>내 문제는 버튼이 매우 작게 나타나는데 아무런 효과도 없이 아래의 높이나 너비를 조정한다는 것입니다. </p> <p>Elementor를 사용하여 WordPress 사이트에 코드를 입력했습니다. HTML 위젯을 끌어서 아래 코드를 붙여넣었습니다. </p> <p> <pre class="brush:css;toolbar:false;">.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 { 색상: 흰색; }</pre> <pre class="brush:html;toolbar:false;"><div class="container"> <button class="btn" data="나를 클릭하세요"></button>
</p>
P粉621033928
P粉621033928

모든 응답(1)
P粉985686557

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

으아악 으아악
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!