호버에 효과가있는 버튼을 만들어야 함 Elementor ?
그렇다면 오늘 우리가 달성할 것은 다음 비디오에 있기 때문에 이 멋진 버스에 앉으십시오.
페이지를 만든 다음 다음을 사용하여 수정해 보겠습니다. Elementor을 클릭한 다음 2열 구조를 선택합니다. 패널에서 다음을 선택하여 새로 생성된 섹션을 수정해 보겠습니다. 최소 높이 현장에서 고도 그리고 즉시 최소 높이 클릭하자 VH 그런 다음 커서를 100.
탭에서 스타일 배경색을 # 070e39로 변경해 보겠습니다.
첫 번째 열에서 Button 위젯을 드롭하고 다음을 입력하여 텍스트를 수정합니다. 세부 정보보기 오른쪽으로 정렬합시다.
탭에서 스타일 수정하자 활판 인쇄술 크기를 변경하여 15, 변환 에 대문자 et 문자 간격 에 1.1
탭에서 고급, 모두 수정 마진 에 20 그리고 섹션에서 사용자 정의 CSS, 버튼에 그라디언트를 추가하는 다음 코드를 붙여넣겠습니다.
선택기 {
-Btn 너비: 180px;
-Btn 높이: 50px;
-Btn-배경: # 0e1538;
– 왼쪽 그라데이션: # F803F8;
– 오른쪽 기울기: # 03F2FD;
}
선택자 a {
위치 : 상대;
너비: var(-btn-width);
높이: var(-btn-높이);
}
선택자 a: 이전,
선택자 a: { 이후
행복하다: ";
위치 : 절대;
삽입: 0;
전환: 0.5초;
}
선택자 a: n번째 자식(1): 이전,
선택자 a: n번째 자식(1): { 이후
배경: 선형 그래디언트(45deg, var(-left-gradient), var(-btn-background), var(-btn-background), var(-right-gradient));
}
선택기 a: hover: { 앞
삽입: -3px;
}
선택기 a: hover: { 후
삽입: -3px;
필터: 흐림(10px);
}
선택기 범위 {
위치 : 절대;
top : 0;
왼쪽 : 0;
폭 : 100 %;
높이 : 100 %;
배경: var(-btn-background);
Z- 인덱스 : 10;
디스플레이 : 플렉스;
정당화 내용 : 센터;
정렬 항목 : 중심;
오버플로 : 숨겨진;
}
이제 버튼 위로 마우스를 가져가면 멋진 효과를 발견할 수 있습니다.
버튼에 반짝이는 유리 효과를 추가하려면 다음 코드도 붙여넣습니다.
/ * 반짝이는 유리 효과 * /
선택기 범위 :: 전에 {
행복하다: ";
위치 : 절대;
top : 0;
왼쪽: -50%;
폭 : 100 %;
높이 : 100 %;
배경: rgba(255,255,255,0.075);
변형: 기울이기(160deg);
}
버튼에 더 많은 빛을 가져다주는 새로운 효과를 관찰했습니다.
이제 이 버튼을 복사하여 두 번째 열에 붙여넣습니다. 버튼 정렬을 왼쪽으로 변경하고 텍스트를 다음으로 변경해 보겠습니다. 더보기.
이제 당신은 게시 작업하거나 미리 봅니다.
여기에 2개의 아름다운 버튼이 생성되었습니다.
지금 Elementor Pro를 받으세요!
결론
그래서 ! 이 튜토리얼에서는 마우스 오버 효과가 있는 버튼을 만드는 방법을 보여줍니다. 페이지 빌더 Elementor. 가는 방법에 대해 우려 사항이 있는 경우 내부에 알려주십시오. commentaires.
그러나 상담 할 수도 있습니다 우리의 자원, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
