웹사이트에 그라데이션 테두리가 있는 버튼을 추가하는 방법
P粉621033928
2023-09-05 20:41:10
<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>
페이지의 원본보다 버튼을 더 크게 만들었습니다(.btn에 높이와 너비만 작성하세요).