- כפתור המצולע – יש להוסיף לכפתור את הקלאס של .poly-btn רוחב המסגרת נקבע לפי השוליים הפנימיים של ווידגט הכפתור, והצבע שלה לפי הרקע של הווידגט (תחת מתקדם – רקע).
.poly-btn .elementor-button {
--cut: 0.7vw; /*זווית המצולע*/
position: relative;
z-index: 0;
border: none !important;
overflow: visible;
/* Inner fill shape */
clip-path: polygon(
var(--cut) 0,
calc(100% - var(--cut)) 0,
100% var(--cut),
100% calc(100% - var(--cut)),
calc(100% - var(--cut)) 100%,
var(--cut) 100%,
0 calc(100% - var(--cut)),
0 var(--cut)
)!important;
}
.poly-btn {
--cut: 0.75vw; /*זווית המצולע*/
clip-path: polygon(
var(--cut) 0,
calc(100% - var(--cut)) 0,
100% var(--cut),
100% calc(100% - var(--cut)),
calc(100% - var(--cut)) 100%,
var(--cut) 100%,
0 calc(100% - var(--cut)),
0 var(--cut)
);
}
@media(max-width:767px){
.poly-btn .elementor-button {
--cut: 10px; /*זווית המצולע*/
}
.poly-btn {
--cut: 12px;/*זווית המצולע*/
}
}2. כפתור המסגרת – יש להוסיף לכפתור את הקלאס של corner-btn. רוחב המסגרת נקבע לפי השוליים הפנימיים של ווידגט הכפתור.
.corner-btn{
--line-color: pink; /*צבע המסגרת*/
--corner: 2vw; /*אורך המסגרת*/
--thick: 1vw; /*אורך המסגרת*/
transition: all 0.25s ease;
background:
/* ימין עליון */
linear-gradient(var(--line-color), var(--line-color)) top right / var(--corner) var(--thick) no-repeat,
linear-gradient(var(--line-color), var(--line-color)) top right / var(--thick) var(--corner) no-repeat,
/* שמאל תחתון */
linear-gradient(var(--line-color), var(--line-color)) bottom left / var(--corner) var(--thick) no-repeat,
linear-gradient(var(--line-color), var(--line-color)) bottom left / var(--thick) var(--corner) no-repeat;
}
.corner-btn:hover{
--corner: 100%;
}
@media(max-width:767px){
.corner-btn{
--corner: 30px; /*אורך המסגרת*/
}
}3. הכפתור המסתובב – יש להוסיף לכפתור את הקלאס של rotate-btn ולהגדיר את הצבעים והשוליים מהקוד:
.rotate-btn{
--background-color:blue; /*צבע רקע*/
--background-hover:pink; /*צבע רקע במעבר עכבר*/
--transition:0.3s;
}
.rotate-btn .elementor-button-text{
border-radius: 50px; /*עיגול פינות של הטקסט*/
background: var(--background-color);
padding: 0.7vw 1vw; /*שוליים פנימיים של הטקסט*/
}
.rotate-btn:hover .elementor-button-text{
background: var(--background-hover);
}
.rotate-btn{
transition: all var(--transition);
}
.rotate-btn:hover{
scale: 1.02; /*הגדלה של הכפתור במעבר עכבר*/
}
.rotate-btn .elementor-button-icon{
border-radius: 50px; /*עיגול פינות של האייקון*/
background: var(--background-color);
padding: 0.6vw 0.7vw 0.8vw 0.7vw; /*שוליים פנימיים של האייקון*/
margin-right: -0.3vw; /*קירוב האייקון לטקסט*/
transform: rotate(45deg); /*סיבוב האייקון*/
transition: all var(--transition);
}
.rotate-btn:hover .elementor-button-icon{
transform: rotate(0deg);
background: var(--background-hover);
}
@media(max-width:1025px){
.rotate-btn .elementor-button-text{
padding: 13px 20px 8px 20px; /*שוליים פנימיים של הטקסט*/
}
.rotate-btn .elementor-button-icon{
padding: 14px 15px 16px 15px; /*שוליים פנימיים של האייקון*/
margin-right: -5px; /*קירוב האייקון לטקסט*/
}
}4. הכפתור המתמלא – יש להוסיף לכפתור את הקלאס של grow-btn ולהגדיר את צבע הרקע והגודל שלו מהקוד:
.grow-btn{
--background-color:pink; /*צבע הרקע של הכפתור*/
}
.grow-btn::before {
content: "";
background-color: var(--background-color);
height: 3vw; /*גובה הכפתור*/
width: 3vw; /*רוחב הכפתור*/
display: block;
border-radius: 50px; /*עיגול פינות של העיגול*/
position: absolute;
top: 50%;
right:0%; /*יישור העיגול לימין, להחליף לשמאל אם צריך*/
transform: translate(0%, -50%);
z-index: -1;
transition: all 0.3s;
}
.grow-btn:hover::before {
width: 100%;
}
@media(max-width:767px){
.grow-btn::before {
height: 50px; /*גובה הכפתור*/
width: 50px; /*רוחב הכפתור*/
}
}5. הכפתור העגול – יש להוסיף לכפתור את הקלאס של round-btn ולהגדיר את צבע הרקע והגודל שלו מהקוד:
.round-btn{
--background-color:pink; /*צבע רקע הכפתור במעבר עכבר*/
}
.round-btn .elementor-button{
height: 10vw; /*גובה הכפתור*/
width: 10vw; /*רוחב העיגול*/
}
.round-btn::before {
content: "";
background-color:transparent;
height: 0px;
width: 0px;
display: block;
border-radius: 500px;
position: absolute;
top: 50%;
right:50%;
transform: translate(50%, -50%);
z-index: -1;
transition: all 0.3s;
}
.round-btn:hover::before {
background-color:var(--background-color);
height: 100%;
width: 100%;
}
.round-btn .elementor-button-content-wrapper{
flex-direction: column-reverse !important;
display: flex;
align-items: center;
}
.round-btn svg{
width: 2vw; /*הגדלת האייקון*/
}
@media(max-width:767px){
.round-btn .elementor-button{
height: 150px; /*גובה הכפתור*/
width: 150px; /*רוחב העיגול*/
}
.round-btn svg{
width:30px; /*הגדלת האייקון*/
}
}


