רעיונות יצירתיים ל 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;
}

<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);
}

<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;
}

<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%;
}

<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://savvy.co.il/wp-content/uploads/2019/06/nature-sprite.png");
    mask: url("https://savvy.co.il/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%;
}