창의적인 호버 효과가 있는 Elementor 애니메이션 버튼 위젯
Creative Button 은 호버 애니메이션이 내장된 클릭 유도 문구 버튼용 무료 Master Addons 위젯입니다. 버튼 효과 목록에서 효과를 선택하고,호버에 대한 텍스트와 선택적 두 번째 메시지를 입력하고,아이콘을 추가하고,일반 색상과 호버 색상의 스타일을 지정합니다. 무료 플러그인에는 6 가지 효과가 포함되어 있습니다: 기본,Winona, Ujarak,Wayra, Tamaya 및 Rayen. 마스터 애드온 프로 pipaluk에서 Shikoba까지 15개를 더 추가하여 총 21개가 됩니다.
Elementor에서 애니메이션 버튼을 추가하는 방법
당신은 Elementor 와 WordPress.org 의 무료 마스터 애드온 플러그인이 필요합니다.
- 아래에서 Creative Button이 켜져 있는지 확인하세요 마스터 애드온, 위젯.
- Elementor 편집기에서 다음을 검색하세요 크리에이티브 버튼 그리고 페이지로 드래그하세요.
- 효과를 선택하세요 버튼 효과 그리고 버튼을 눌러 미리보기.
- 버튼 텍스트, 대체 버튼 텍스트 및 링크 URL을 입력합니다.
- 아이콘을 추가하고 이전 또는 이후를 선택합니다.
- 스타일 탭에서 패딩, 테두리 반경 및 다양한 일반 및 호버 색상을 설정하여 애니메이션을 쉽게 볼 수 있습니다.
툴팁 및 공개 애니메이션과 같은 확장 기능을 사용하여 더 긴 연습을 원하시면 읽어보세요 Elementor 애니메이션 버튼을 만드는 방법. 모든 설정은 에 있습니다 크리에이티브 버튼 위젯 설정.
21 호버 효과: 6 무료, 프로와 15
각 이름 in 버튼 효과 는 슬라이드 인 배경,버튼 주위를 그리는 테두리 또는 두 번째 메시지로 스왑되는 텍스트와 같은 다른 CSS 호버 애니메이션입니다. 기본값,Winona, Ujarak,Wayra, Tamaya 및 Rayen 은 무료입니다. Pipaluk,Moema, Isi,Aylen, Saqui,Wapasha, Nina,Nanuk, Nuka,Antiman, Itzel,Naira, Quidel,Sacnite 및 Shikoba 는 Pro 가 필요합니다. 캔버스의 버튼을 눌러 각각을 미리 봅니다.
- 버튼 정렬 및 버튼 텍스트 정렬, 장치별로 설정됩니다.
- 레이어드 배경을 사용하는 효과를 위한 추가 전후 배경색입니다.
- 애니메이션 속도는 각 효과에 의해 고정됩니다. 전환 기간 설정은 없습니다.
버튼 텍스트, 대체 텍스트, 아이콘 및 스타일링
설정하세요 버튼 텍스트 그리고 a 링크 URL 일반적인 새 탭과 nofollow 옵션을 사용합니다. Default 를 제외한 모든 효과는 an 을 보여줍니다 대체 버튼 텍스트 호버 메시지의 필드. an 추가 아이콘 아이콘 간격이 있는 텍스트의 앞이나 뒤에. In 버튼 스타일, 너비, 타이포그래피, 버튼 패딩, 테두리, 테두리 반경, 상자 그림자 및 아이콘 크기를 설정한 다음 일반 및 호버용 텍스트, 배경 및 아이콘 색상을 선택합니다.
- 호버에서 “무료” 로 변경되는 “시작하기”.
- 방향을 표시하려면 텍스트 뒤에 화살표 아이콘이 표시됩니다.
- 호버링 시 색상이 변하는 테두리가 있는 둥근 알약 버튼입니다.
Elementor 버튼 대 마스터 애드온 크리에이티브 버튼
무료 Elementor Button 위젯에는 이미 호버 애니메이션이 있습니다. 여기에 각각이 맞는 곳이 있습니다.
| 특징 | 엘리멘터 버튼 | 마스터 애드온 크리에이티브 버튼 |
|---|---|---|
| 가격 | Elementor에서는 무료입니다 | 6 효과 무료, 21 프로와 |
| 호버 애니메이션 | Grow, Pulse, Bob 및 Wobble과 같은 Elementor Hover 애니메이션 목록입니다 | 슬라이딩 배경, 테두리 및 레이어드 색상의 CSS 효과 명명 |
| 호버에서 텍스트 스왑 | 아니요 | 대체 버튼 텍스트 |
| 배경 | 일반 및 호버용 클래식 또는 그라데이션 | 단색, 일부 효과의 전후 색상 |
| 전환 속도 | 전환 기간 설정 | 각 효과에 의해 고정 |
| 아이콘 | 전후, 간격으로 | 전후에, 간격, 크기 및 호버 색깔과 더불어 |
그라데이션,사용자 정의 전환 속도 또는 간단한 성장 또는 펄스에 대해서는 Elementor 버튼을 사용하십시오. 사용자 정의 CSS 없이 백그라운드 스윕 또는 텍스트 스왑을 원할 때 Creative 버튼을 사용하십시오. 애니메이션 텍스트 링크는 을 참조하십시오 크리에이티브 링크.
Creative Button에 대해 자주 묻는 질문
Creative Button 위젯은 무료입니까?
예. 위젯과 6 효과 (기본값,Winona, Ujarak,Wayra, Tamaya 및 Rayen) 는 무료입니다. 다른 15 효과는 필요합니다 마스터 애드온 프로.
양식 제출 버튼으로 사용할 수 있나요?
호버 효과가 휴대폰에서 작동하나요?
터치 스크린에는 호버가 없으므로 전화기의 대부분의 방문자는 정상적인 상태를보고 링크로 바로 이동합니다. 정상적인 색상과 텍스트가 스스로 작동하는지 확인하십시오.
호버 애니메이션의 속도를 변경할 수 있나요?
패널에는 없습니다. 각 효과에는 고유한 타이밍이 있습니다. 버튼에서 사용자 정의 CSS 로 변경하거나 전환 기간 설정이 있는 Elementor Button 위젯을 사용할 수 있습니다.
Elementor Button 호버 애니메이션과 어떻게 다른가요?
Elementor 버튼은 예를 들어 성장 또는 펄스와 같이 전체 버튼을 이동합니다. Creative 버튼 효과는 배경 슬라이딩이나 텍스트가 대체 버튼 텍스트로 변경되는 등 버튼 내부에 애니메이션을 적용합니다.
트렌드 엘리먼트 위젯 및 확장
더 짧은 시간에 정교한 웹사이트를 구축하세요.
![Elementor용 마스터 애드온 게시물/페이지 복제기 확장: 랜딩 페이지를 생성하는 WordPress 페이지 목록의 MA 복제기 행 링크 - [복제된 #128] 초안](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
