5 אפקטים מדהימים לשדרוג כפתורים באלמנטור – CSS בלבד

כפתורים זה אלמנט שאנחנו כמעט ולא משקיעים בו, כי הפיתוח שלו די מורכב למתחילים. קבלו 5 אפקטים מגניבים שאפשר להטמיע בשניה באתרים שלכם וישדרגו אותם בטירוף!

אפקטי CSS

יש לשים את הקוד הנבחר על כפתור ספציפי במתקדם - css מותאם אישית, או באופן רוחבי באלמנטור ניהול קודים תחת body end

  1. כפתור המצולע – יש להוסיף לכפתור את הקלאס של .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; /*הגדלת האייקון*/
}
}
[safe_code_display]

אם אתם כבר במוד למידה, קבלו הדרכות שוות נוספות:

gsap (56)
GSAP / Java Script

אנימציית תמונה נחשפת בגלילה + גלילה צידית

gsap (52)
שיווק ועסקי

תרגולילה #8 – עבודה מול לקוחות פרימיום

gsap (46)
אפקטי CSS

תרגולילה #7 – אנימציות ב-CSS והשקת סדנאות הספיישל

gsap (27) (1)
פיתוח

תרגולילה #6 – 12 שיטות לפיתוח מושלם