Divi : 모든 시간의 최고의 WordPress 테마!

901.000 다운로드Divi는 세계에서 가장 인기있는 WordPress 테마입니다. 그것은 완전하고, 사용하기 쉽고 62 무료 템플릿 이상을 제공합니다.

Elementor로 호버 효과가 있는 버튼을 만들어야 함 ?

그렇다면 오늘 우리가 달성할 것은 다음 비디오에 있기 때문에 이 멋진 버스에 앉으십시오.

페이지를 생성하고 Elementor로 수정한 다음 2열 구조를 선택합시다. 패널에서 다음을 선택하여 새로 생성된 섹션을 편집해 보겠습니다. 최소 높이 현장에서 고도 그리고 즉시 최소 높이 클릭하자 VH 그런 다음 커서를 100.

Elementor로 호버 효과가 있는 버튼 만들기

탭에서 스타일 배경색을 # 070e39로 변경해 보겠습니다.

첫 번째 열에서 Button 위젯을 드롭하고 다음을 입력하여 텍스트를 수정합니다. 세부 정보보기 오른쪽으로 정렬합시다.

Elementor로 호버 효과가 있는 버튼 만들기

탭에서 스타일 수정하자 활판 인쇄술 크기를 변경하여 15, 변환 대문자 et 문자 간격1.1

Elementor로 호버 효과가 있는 버튼 만들기

탭에서 고급, 모두 수정 마진 20 그리고 섹션에서 사용자 정의 CSS, 버튼에 그라디언트를 추가하는 다음 코드를 붙여넣겠습니다.        

선택기 {

    -Btn 너비: 180px;

    -Btn 높이: 50px;

    -Btn-배경: # 0e1538;

    – 왼쪽 그라데이션: # F803F8;

    – 오른쪽 기울기: # 03F2FD;

}

선택자 a {

  위치 : 상대;

  너비: var(-btn-width);

  높이: var(-btn-높이);

}

선택자 a: 이전,

선택자 a: { 이후

  행복하다: ";

Elementor로 웹 사이트를 쉽게 만들 수 있습니다

Elementor를 사용하면 쉽고 무료 전문적인 모습의 모든 웹 사이트 또는 블로그 디자인. 스스로 할 수 있는 웹사이트에 많은 비용을 지불하지 마십시오.

  위치 : 절대;

  삽입: 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;

  디스플레이 : 플렉스;

  정당화 내용 : 센터;

  정렬 항목 : 중심;

  오버플로 : 숨겨진;

}

Elementor로 호버 효과가 있는 버튼 만들기

이제 버튼 위로 마우스를 가져가면 멋진 효과를 발견할 수 있습니다.

버튼에 반짝이는 유리 효과를 추가하려면 다음 코드도 붙여넣습니다.

/ * 반짝이는 유리 효과 * /

선택기 범위 :: 전에 {

  행복하다: ";

  위치 : 절대;

  top : 0;

  왼쪽: -50%;

  폭 : 100 %;

  높이 : 100 %;

  배경: rgba(255,255,255,0.075);

  변형: 기울이기(160deg);

}

Elementor로 호버 효과가 있는 버튼 만들기

버튼에 더 많은 빛을 가져다주는 새로운 효과를 관찰했습니다.

읽기 : Elementor로 팀원 섹션을 만드는 방법

이제 이 버튼을 복사하여 두 번째 열에 붙여넣습니다. 버튼 정렬을 왼쪽으로 변경하고 텍스트를 다음으로 변경해 보겠습니다. 더보기.

이제 작업을 게시하거나 미리 보기만 하면 됩니다.

여기에 2개의 아름다운 버튼이 생성되었습니다.

지금 Elementor Pro를 받으세요!

결론

그래서 ! Elementor 페이지 빌더로 호버 효과 버튼을 만드는 방법을 보여주는 이 튜토리얼은 여기까지입니다. 가는 방법에 대해 우려 사항이 있으면 commentaires.

그러나 상담 할 수도 있습니다 우리의 자원, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.

그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.

...

0 주식
짹짹
레지스터