רעיונות יצירתיים ל Hover Effects על כפתורים

נראה מספר אפקטים על כפתורים בעת ריחוף עם העכבר.

יהיה לכם די קשה למצוא אתר אינטרנט בו אין לפחות סוג אחד של כפתור. לכפתורים תפקיד חשוב באתרי אינטרנט ואלו בדרך כלל אלמנטים שנועדו בכדי לגרום למשתמש לבצע פעולה כלשהי. בפוסט הבא אציג מספר סוגים של אפקטים בעת ריחוף עם העכבר מעל כפתור – במילים אחרות Hover Effect.

לחיצה על הכפתור תציג בפניכם את הקוד בו השתמשתי בכדי לייצר את אותו אפקט הובר. כדאי שתדעו, כי באופן כללי את מרבית האפקטים שתמצאו בפוסט זה לא אני יצרתי, אלא מצאתי אלו בזמן שוטטות ברשת ובחלקם ביצעתי שינויים. אני מקווה שתמצאו מועיל על כל מקרה.

!!! אני מאד ממליץ לצפות בדוגמאות הבאות בדסקטופ ולא ממכשירי מובייל וזאת בגדול מכיוון ואפקט הריחוף (Hover) לא קיים במובייל.

מעבר לכך, שימו לב כי ייתכן ותאלצו לשחק מעט עם ה CSS בכדי להתאים את הכפתורים לאתר שלכם, זאת מכיוון והגדרות ה CSS עבור האלמנטים בהם השתמשתי יכולות להיות שונות אצלכם. על כל מקרה אתם מוזמנים לשתף אם אתם נתקלים בבעיות ואני מבטיח לעזור…

דוגמאות ל Hover Effects על כפתורים

אז נתחיל עם אפקטים מאד בסיסיים, הם יכולים להיות הכי נכונים בהרבה מקרים…

<button class="btn btn1" data-id="btn1">כפתור</button>
.btn {
    color: #fefefe;
    background: #62757f;
    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
    border: 4px solid #62757f;
    text-align: center;
}

.btn:hover {
    background: transparent;
}

.btn1 {
    border-radius: 15px;
    border: 4px double #62757f;
}

.btn1:hover {
    color: #62757f;
}
<button class="btn btn2" data-id="btn2">כפתור</button>
.btn {
    color: #fefefe;
    background: #62757f;
    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
    border: 4px solid #62757f;
    text-align: center;
}

.btn2 {
    border-radius: 60px;
}

.btn2:hover {
    background: transparent;
    color: #62757f;
}
<button class="btn btn3" data-id="btn3">כפתור</button>
.btn {
    color: #fefefe;
    background: #62757f;
    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
    border: 4px solid #62757f;
    text-align: center;
}

.btn3 {
    border: 2px dashed #62757f;
}

.btn3:hover {
    background: transparent;
    color: #62757f;
}
<button class="btn btn4" data-id="btn4">כפתור</button>
.btn {
    color: #fefefe;
    background: #62757f;
    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
    border: 4px solid #62757f;
    text-align: center;
}

.btn4 {
    border: 2px dotted #62757f;
    border-radius: 15px;
}

.btn4:hover {
    background: transparent;
    color: #62757f;
}

נעצור ונאמר כי את האפקטים על ארבעת הכפתורים הבאים ניתן לבצע בצורה חכמה יותר על ידי שימוש ב pseudo-elements

<button data-id="btn5" class="btn btn5"><div id="slide"></div><span>כפתור</span></button>
.btn {
    display: inline-flex;
    border: 2px solid #354756;
    color: #fefefe;
    overflow: hidden;
    place-content: center;
    background: transparent;
}

.btn5 {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.btn5 span {
    position: relative;
    transition: all .35s ease-Out;
}

#slide {
    width: 100%;
    height: 100%;
    left: -100%;
    background: #c68400;
    position: absolute;
    transition: all .35s ease-Out;
    bottom: 0;
}

.btn5:hover #slide {
    left: 0;
}

.btn5:hover span {
    color: #fefefe;
}
<button data-id="btn6" class="btn btn6"><div id="circle"></div><span>כפתור</span></button>
.btn {
    display: inline-flex;
    border: 2px solid #354756;
    color: #fefefe;
    overflow: hidden;
    place-content: center;
    background: transparent;
}

.btn6 {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.btn6 span {
    position: relative;
    transition: all .45s ease-Out;
}

#circle {
    width: 0%;
    height: 0%;
    opacity: 0;
    line-height: 40px;
    border-radius: 50%;
    background: #c68400;
    position: absolute;
    transition: all .5s ease-Out;
    top: 20px;
    left: 110px;
}

.btn6:hover #circle {
    width: 200%;
    height: 500%;
    opacity: 1;
    top: -70px;
    left: -70px;
}

.btn6:hover span {
    color: #fefefe;
}
<button data-id="btn7" class="btn btn7"><div id="underline"></div><span>כפתור</span></button>
.btn {
    display: inline-flex;
    border: 2px solid #354756;
    color: #fefefe;
    overflow: hidden;
    place-content: center;
    background: transparent;
}

.btn7 {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.btn7 span {
    position: relative;
    transition: all .45s ease-Out;
}

#underline {
    width: 100%;
    height: 2.5px;
    margin-top: 15px;
    align-self: flex-end;
    left: -100%;
    background: #c68400;
    position: absolute;
    transition: all .3s ease-Out;
    bottom: 0;
}

.btn7:hover #underline {
    left: 0;
}
<button data-id="btn8" class="btn btn8"><div id="translate"></div><span>כפתור</span></button>
.btn {
    display: inline-flex;
    border: 2px solid #c68400;
    color: #222;
    overflow: hidden;
    place-content: center;
    background: transparent;
}

.btn8 {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.btn8 span {
    position: relative;
    transition: all .45s ease-Out;
}

#translate {
    transform: rotate(40deg);
    width: 100%;
    height: 250%;
    left: -115%;
    top: -30px;
    background: #c68400;
    position: absolute;
    transition: all .3s ease-Out;
}

.btn8:hover #translate {
    left: 0;
}

.btn8:hover span {
    color: #fefefe;
}
<button data-id="btn9" class="btn btn9"><span>כפתור</span></button>
.btn {
    position: relative;
    color: white;
    width: 100%;
    height: 49px;
    line-height: 49px;
    transition: all 0.3s;
    background: transparent;
    border: 0;
    display: flex;
    place-content: center;
    /* font-weight: 300; */
}

.btn span {
    transition: all 0.3s;
    line-height: 1;
}

.btn9::before, .btn9::after {
    content: '';
    position: absolute;
    transition: all 0.3s;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.btn9::before {
    left: 4px;
    z-index: 1;
    opacity: 0;
    background: rgba(255, 255, 255, 0.1);
    transform: scale(0.1, 1);
}

.btn9:hover::before {
    opacity: 1;
    transform: scale(1, 1);
}

.btn9::after {
    transition: all 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.7);
}

.btn9:hover::after {
    transform: scale(1, .1);
    opacity: 0;
}
<button data-id="btn10" class="btn btn10"><span>כפתור</span></button>
.btn {
    position: relative;
    color: white;
    width: 100%;
    height: 49px;
    line-height: 49px;
    transition: all 0.3s;
    background: transparent;
    border: 0;
    display: flex;
    place-content: center;
    /* font-weight: 300; */
}

.btn span {
    transition: all 0.3s;
    line-height: 1;
}

.btn10::before, .btn10::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    z-index: 1;
    transition: all 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.7);
}

.btn10:hover::after {
    animation-name: rotatecw;
    animation-duration: 2s;
}

.btn10:hover::before {
    animation-name: rotateccw;
    animation-duration: 3s;
}

.btn10:hover::after, .btn10:hover::before {
    left: 31%;
    width: 100px;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes rotatecw {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes rotateccw {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}
<button data-id="btn11" class="btn btn11"><span>כפתור</span></button>
.btn {
    position: relative;
    color: white;
    width: 100%;
    height: 49px;
    line-height: 49px;
    transition: all 0.3s;
    background: transparent;
    border: 0;
    display: flex;
    place-content: center;
}

.btn span {
    transition: all 0.3s;
    line-height: 1;
}

.btn11::before {
    opacity: 0;
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1, 0.1);
}

.btn11:hover::before {
    opacity: 1;
    transform: scale(1, 1);
}

.btn11::after {
    transition: all 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.7);
}

.btn11:hover::after {
    transform: scale(1, .1);
    opacity: 0;
}
<button data-id="btn12" class="btn btn12"><span>כפתור</span></button>
.btn {
    position: relative;
    color: white;
    width: 100%;
    height: 49px;
    line-height: 49px;
    transition: all 0.3s;
    background: transparent;
    border: 0;
    display: flex;
    place-content: center;
}

.btn span {
    transition: all 0.3s;
    line-height: 1;
}

.btn12::before {
    opacity: 0;
    background: rgba(255, 255, 255, 0.1);
    transform: scale(0.1, 0.1);
}

.btn12:hover::before {
    opacity: 1;
    transform: scale(1, 1);
}

.btn12::after {
    transition: all 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.7);
}

.btn12:hover::after {
    transform: scale(0, 0);
    opacity: 0;
}
<div data-id="btn13" class="btn13">
    <a href=""><span data-hover="כפתור">כפתור</span></a>
</div>
.btn {
    color: #fff;
    background: transparent;
    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
    border: 0;
    text-align: center;
    padding: 0;
}


.btn13 a {
    line-height: 44px;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    perspective: 1000px;
    position: relative;
    outline: none;
    color: #fff;
    text-decoration: none;
}

.btn13 a span {
    position: relative;
    display: inline-block;
    background: #42a4f5;
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    text-align: center;
    width: 100%;
}

.btn13 a span::before {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: #5d99c6;
    content: attr(data-hover);
    -webkit-transition: background 0.3s;
    -moz-transition: background 0.3s;
    transition: background 0.3s;
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    transform-origin: 50% 0;
}

.btn13 a:hover span,
.btn13 a:focus span {
    -webkit-transform: rotateX(90deg) translateY(-22px);
    -moz-transform: rotateX(90deg) translateY(-22px);
    transform: rotateX(90deg) translateY(-22px);
}

.btn13 a:hover span::before,
.btn13 a:focus span::before {
    background: #0177c2;
}
<div data-id="btn14" class="btn14">
    <a href=""><span data-hover="כפתור">כפתור</span></a>
</div>
.btn {
    color: #fff;
    background: transparent;
    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
    border: 0;
    text-align: center;
    padding: 0;
}

.btn14 a {
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    perspective: 800px;
    width: 200px;
    position: relative;
    display: inline-block;
    outline: none;
    color: #fff;
    text-align: center;
    width: 100%;
    line-height: 42px;
}

.btn14 a span {
    position: relative;
    display: inline-block;
    width: 100%;
    background: #ff7043;
    -webkit-transition: -webkit-transform 0.4s, background 0.4s;
    -moz-transition: -moz-transform 0.4s, background 0.4s;
    transition: transform 0.4s, background 0.4s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50% -100px;
    -moz-transform-origin: 50% 50% -100px;
    transform-origin: 50% 50% -125px;
}

.btn14 a span::before {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background: #c55c38;
    content: attr(data-hover);
    -webkit-transition: background 0.4s;
    -moz-transition: background 0.4s;
    transition: background 0.4s;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-transform-origin: 0 50%;
    -moz-transform-origin: 0 50%;
    transform-origin: 0 50%;
    pointer-events: none;
}

.btn14 a:hover span,
.btn14 a:focus span {
    background: #ef5e50;
    -webkit-transform: rotateY(-90deg);
    -moz-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
}

.btn14 a:hover span::before,
.btn14 a:focus span::before {
    background: #ef5e50;
}
<div data-id="btn15" class="btn15">
    <a href="" data-hover="כפתור"><span data-hover="כפתור">כפתור</span></a>
</div>
.btn {
    color: #fff;
    background: transparent;
    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
    border: 0;
    text-align: center;
    padding: 0;
}

.btn15 {
    position: relative;
    z-index: 1;

}

.btn15 a {
    overflow: hidden;
    position: relative;
    display: inline-block;
    outline: none;
    color: #fff;
    width: 100%;
    text-align: center;
}

.btn15 a span {
    display: block;
    padding: 10px 20px;
    background: #25a49a;
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
}

.btn15 a::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    padding: 10px 0;
    width: 100%;
    height: 100%;
    background: #00766c;
    color: white;
    content: attr(data-hover);
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
    -webkit-transform: translateX(-25%);
}

.btn15 a:hover span,
.btn15 a:focus span {
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    transform: translateX(100%);
}

.btn15 a:hover::before,
.btn15 a:focus::before {
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    transform: translateX(0%);
}
<div data-id="btn16" class="btn16">
    <a href="" data-hover="כפתור"><span data-hover="כפתור">כפתור</span></a>
</div>
.btn {
    color: #fff;
    background: transparent;
    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
    border: 0;
    text-align: center;
    padding: 0;
}

.btn16 a {
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    perspective: 800px;
    position: relative;
    outline: none;
    color: #fff;
}

.btn16 a span {
    position: relative;
    display: inline-block;
    /* padding: 3px 15px 0; */
    background: #607e8b;
    box-shadow: inset 0 3px #34505e;
    -webkit-transition: background 0.6s;
    -moz-transition: background 0.6s;
    transition: background 0.6s;
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 0% 50%;
    -moz-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    width: 100%;
    text-align: center;
    color: #fff;
    line-height: 42px;
}

.btn16 a span::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    color: #34505e;
    content: attr(data-hover);
    -webkit-transform: rotateX(270deg);
    -moz-transform: rotateX(270deg);
    transform: rotateX(270deg);
    -webkit-transition: -webkit-transform 0.6s;
    -moz-transition: -moz-transform 0.6s;
    transition: transform 0.6s;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform-origin: 0 0;
    pointer-events: none;
}

.btn16 a:hover span,
.btn16 a:focus span {
    background: #2f4351;
}

.btn16 a:hover span::before,
.btn16 a:focus span::before {
    -webkit-transform: rotateX(10deg);
    -moz-transform: rotateX(10deg);
    transform: rotateX(10deg);
}
אפקט נחמד של עננים / בועות או איך שתרצו לקרוא לזה. שימו לב כי באפקט זה עשינו שימוש ב CSS Variables:
<button class="btn17">
    כפתור
    <span></span><span></span><span></span><span></span>
</button>
.btn17 {
    --c: #018ba3;
    color: var(--c);
    border: 0;
    border-radius: 90px;
    width: 253px;
    text-align: center;
    line-height: 30px;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: 0.5s;
    height: 60px;
    background: white;
}

.btn17 span {
    position: absolute;
    width: 25%;
    height: 100%;
    background-color: var(--c);
    transform: translateY(150%);
    border-radius: 50%;
    left: calc((var(--n) - 1) * 25%);
    transition: 0.5s;
    transition-delay: calc((var(--n) - 1) * 0.05s);
    z-index: -1;
}

.btn17:hover {
    color: #fefefe;
    background: white;
}

.btn17:hover span {
    transform: translateY(0) scale(2);
}

.btn17 span:nth-child(1) {
    --n: 1;
}

.btn17 span:nth-child(2) {
    --n: 2;
}

.btn17 span:nth-child(3) {
    --n: 3;
}

.btn17 span:nth-child(4) {
    --n: 4;
}
עבור אפקט זה נעשה שימוש ב mix-blend-mode, תכונת CSS מגניבה שאכתוב עליה בקרוב...
<button class="btn18">
    <span class="btn-text">ימים&nbsp;&nbsp;&nbsp;לילות</span>
</button>
.btn18 {
    border: none;
    padding: 12px 54px;
    font-size: 36px;
    position: relative;
    letter-spacing: 8px;
    background: white;
}

.btn18:hover {
    background: white;
}

.btn18::before {
    transition: all 0.85s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    content: '';
    width: 50%;
    height: 100%;
    background: #373737;
    position: absolute;
    top: 0;
    left: 0;
}

.btn18 .btn-text {
    color: white;
    mix-blend-mode: difference;
    font-size: 18px;
}

.btn18:hover::before {
    background: #373737;
    width: 100%;
}
באפקט זה נעשה שימוש Masking - עוד תכונת CSS מאד נחמדה:
כפתור
<div class="btn19">
    <span class="mas">כפתור</span>
    <button>כפתור</button>
</div>
.btn19 {
    position: relative;
    width: 120px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    border: 1px solid;
    font-weight: 300;
    transition: 0.5s;
    display: flex;
    align-items: center;
    background: white;
}

.btn19 button {
    width: 100%;
    height: 100%;
    font-weight: 300;
    background: #333333;
    -webkit-mask: url("https://he.savvy.co.il/blog/wp-content/uploads/2019/06/nature-sprite.png");
    mask: url("https://he.savvy.co.il/blog/wp-content/uploads/2019/06/nature-sprite.png");
    -webkit-mask-size: 2300% 100%;
    mask-size: 2300% 100%;
    border: none;
    color: #fff;
    cursor: pointer;
    -webkit-animation: ani2 0.7s steps(22) forwards;
    animation: ani2 0.7s steps(22) forwards;
}

.btn19 button:hover {
    -webkit-animation: ani 0.7s steps(22) forwards;
    animation: ani 0.7s steps(22) forwards;
    background: #333;
}

.mas {
    position: absolute;
    color: #2c2c2c;
    text-align: center;
    width: 100%;
    font-weight: 300;
    overflow: hidden;
}

@-webkit-keyframes ani {
    from {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
    to {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
    }
}

@keyframes ani {
    from {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
    to {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
    }
}

@-webkit-keyframes ani2 {
    from {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
    }
    to {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
}

@keyframes ani2 {
    from {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
    }
    to {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
}


@-webkit-keyframes stripe-slide {
    0% {
        background-position: 0% 0;
    }
    100% {
        background-position: 100% 0;
    }
}

@keyframes stripe-slide {
    0% {
        background-position: 0% 0;
    }
    100% {
        background-position: 100% 0;
    }
}
<div class="btn20">
    <button class="btn--stripe">כפתור</button>
</div>
.btn--stripe {
    overflow: visible;
    font: inherit;
    line-height: normal;
    cursor: pointer;
    -moz-user-select: text;
    display: block;
    text-decoration: none;
    text-transform: uppercase;
    padding: 16px 86px 22px;
    background-color: #fff;
    color: #666;
    border: 2px solid #666;
    border-radius: 6px;
    transition: all .5s ease;
}

.btn--stripe:-moz-focus-inner {
    padding: 0;
    border: 0;
}

.btn--stripe {
    overflow: hidden;
    position: relative;
}

.btn--stripe:after {
    content: '';
    display: block;
    height: 7px;
    width: 100%;
    background-image: repeating-linear-gradient(45deg, #666, #666 1px, transparent 2px, transparent 5px);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-top: 1px solid #666;
    position: absolute;
    left: 0;
    bottom: 0;
    background-size: 7px 7px;
}

.btn--stripe:hover {
    background-color: #b61727;
    color: #fff;
    border-color: #222;
}

.btn--stripe:hover:after {
    background-image: repeating-linear-gradient(45deg, #fff, #fff 1px, transparent 2px, transparent 5px);
    border-top: 1px solid #000;
    -webkit-animation: stripe-slide 12s infinite linear forwards;
    animation: stripe-slide 12s infinite linear forwards;
}
<button class="button type1">
    כפתור
</button>
.type1{
    position: relative;
    padding: 1em 1.5em;
    border: none;
    background-color: transparent;
    cursor: pointer;
    outline: none;
    width: 100%;
}

.type1:hover {
    background: #fff176;
}

.type1 {
    color: #00675b;
}

.type1::after, .type1::before {
    content: "";
    display: block;
    position: absolute;
    width: 20%;
    height: 20%;
    border: 2px solid;
    transition: all 0.6s ease;
    border-radius: 2px;
}

.type1::after {
    bottom: 0;
    right: 0;
    border-top-color: transparent;
    border-left-color: transparent;
    border-bottom-color: #00675b;
    border-right-color: #00675b;
}

.type1::before {
    top: 0;
    left: 0;
    border-bottom-color: transparent;
    border-right-color: transparent;
    border-top-color: #00675b;
    border-left-color: #00675b;
}

.type1:hover:after, .type1:hover:before {
    width: 100%;
    height: 100%;
}
<button class="button type2">
    כפתור
</button>
.type2 {
    position: relative;
    padding: 1em 1.5em;
    border: none;
    background-color: transparent;
    cursor: pointer;
    outline: none;
    width: 100%;
    color: #029588;

}

.type2:hover {
    background: #fff176;
}

.type2:after, .type2:before {
    content: "";
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #00675b;
    transition: all 0.3s ease;
    transform: scale(0.85);
}

.type2:hover:before {
    top: 0;
    transform: scale(1);
}

.type2:hover:after {
    transform: scale(1);
}
<button class="button type3">
    כפתור
</button>
.type3 {
    position: relative;
    padding: 1em 1.5em;
    border: none;
    background-color: transparent;
    cursor: pointer;
    outline: none;
    width: 100%;
    color: #00675b;
}

.type3:hover {
    background: #fff176;
}

.type3::after, .type3::before {
    content: "";
    display: block;
    position: absolute;
    width: 20%;
    height: 20%;
    border: 2px solid;
    transition: all 0.6s ease;
    border-radius: 2px;
}

.type3::after {
    bottom: 0;
    right: 0;
    border-top-color: transparent;
    border-left-color: transparent;
    border-bottom-color: #435a6b;
    border-right-color: #435a6b;
}

.type3::before {
    top: 0;
    left: 0;
    border-bottom-color: transparent;
    border-right-color: transparent;
    border-top-color: #00675b;
    border-left-color: #00675b;
}

.type3:hover:after, .type3:hover:before {
    border-bottom-color: #00675b;
    border-right-color: #00675b;
    border-top-color: #00675b;
    border-left-color: #00675b;
    width: 100%;
    height: 100%;
}

הרגישו חופשי לתת רעיונות חדשים לכפתורים בתגובות מטה ואוסיף אותם לפוסט (אם יהיו מעניינים כמובן) – מעבר לכך, אם בא לכם לראות כפתורים מתפרקים תנו מבט בפוסט הבא. ואם אנחנו כבר כאן, אשמח אם תשתפו חברים שהנושא יכול לעניין אותם 🙂 נתראה בפוסט הבא!

רועי יוסף
רועי יוסף

מפתח וורדפרס, מאמין ביצירת הזדמנויות לעסקים קטנים, סטארטאפים נועזים ואנשים עצמאים לשנות את העולם. אוהב טיפוגרפיה, צבעים וכל מה שבינהם ומכוון לספק אתרי וורדפרס עם ביצועים גבוהים, תמיכה בכל הדפדפנים, בעלי קוד ולידי, סמנטי ונקי.

3תגובות...
  • תומס 18 ביוני 2019, 23:25

    תודה רבה, יש פה כמה ממש יפים!
    האם יש דרך לשנות את הטקסט עצמו לאחר הלחיצה על הכפתור?

    • רועי יוסף 18 ביוני 2019, 23:26

      אפשר תומס, אך זה דורש מעט Javascript (במרבית המקרים)…

  • אליאור טבקה 18 ביוני 2019, 23:42

    דוגמאות נהדרות 🙂 תודה על השיתוף

השאירו תגובה

פעימות
Up!