Copied a hover effect but is not the same as the original

original: https://fossheim.io/ button label: collaborate Playground: https://play.tailwindcss.com/ye0B1eQNlY

1 Reply

Box shadows and positions (top, left etc.) are not very good for animations. I suggest that, rather than changing the top and left position on hover, try using translate: translate: 5.5px 6px; (don't forget to add translate to the transition) Actually I think that you have copied something differently. I have just copied the original CSS and in my version it is working in the same way as the original. This is my based on the original CSS(removed the custom properties etc.) :

.pressable-button {
    box-shadow: .5px 1px 0 0 #7dd3fc,
        1.5px 2px 0 0 #7dd3fc,
        2.5px 3px 0 0 #7dd3fc,
        3.5px 4px 0 0 #7dd3fc,
        4.5px 5px 0 0 #7dd3fc,
        5.5px 6px 0 0 #7dd3fc;
    position: relative;
    top: 0;
    left: 0;
    transition: box-shadow .35s,
        top .3s,
        left .3s,
        transform .4s,
        outline-color .4s;
    cursor: pointer;
    transform: rotateX(0) rotateY(0) rotateZ(0);


}

.pressable-button:hover {
    box-shadow: 
        0 0 0 0 #7dd3fc, 
        0 0 0 0 #7dd3fc, 
        0 0 0 0 #7dd3fc, 
        0 0 0 0 #7dd3fc, 
        0 0 0 0 #7dd3fc, 
        0 0 0 0 #7dd3fc;
    top: 6px;
    left: 5.5px;
    transform: rotateX(5deg) rotateY(3deg) rotateZ(.25deg);
}

.pressable-button {
    box-shadow: .5px 1px 0 0 #7dd3fc,
        1.5px 2px 0 0 #7dd3fc,
        2.5px 3px 0 0 #7dd3fc,
        3.5px 4px 0 0 #7dd3fc,
        4.5px 5px 0 0 #7dd3fc,
        5.5px 6px 0 0 #7dd3fc;
    position: relative;
    top: 0;
    left: 0;
    transition: box-shadow .35s,
        top .3s,
        left .3s,
        transform .4s,
        outline-color .4s;
    cursor: pointer;
    transform: rotateX(0) rotateY(0) rotateZ(0);


}

.pressable-button:hover {
    box-shadow: 
        0 0 0 0 #7dd3fc, 
        0 0 0 0 #7dd3fc, 
        0 0 0 0 #7dd3fc, 
        0 0 0 0 #7dd3fc, 
        0 0 0 0 #7dd3fc, 
        0 0 0 0 #7dd3fc;
    top: 6px;
    left: 5.5px;
    transform: rotateX(5deg) rotateY(3deg) rotateZ(.25deg);
}

That said, I would be tempted to use pseudo elements and translate rather than adjusting the position and box-shadow. Something like this:

.pressable-button {
    position: relative;
    transition: transform 300ms;
    transform: rotateX(0) rotateY(0) rotateZ(0);
}
.pressable-button::before,
.pressable-button::after{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: -1;
}
.pressable-button::before{
    transition: inset 0.3s;
    color: #7dd3fc;
    box-shadow: .5px 1px,1.5px 2px,2.5px 3px,3.5px 4px,4.5px 5px,5.5px 6px;
}
.pressable-button::after {
    background-color: #0369A1;
}
.pressable-button:hover {
    transform: rotateX(5deg) rotateY(3deg) rotateZ(.25deg) translate(5.5px,6px);
}
.pressable-button:hover::before{
    inset: 0 5.5px 6px 0;
}

.pressable-button {
    position: relative;
    transition: transform 300ms;
    transform: rotateX(0) rotateY(0) rotateZ(0);
}
.pressable-button::before,
.pressable-button::after{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: -1;
}
.pressable-button::before{
    transition: inset 0.3s;
    color: #7dd3fc;
    box-shadow: .5px 1px,1.5px 2px,2.5px 3px,3.5px 4px,4.5px 5px,5.5px 6px;
}
.pressable-button::after {
    background-color: #0369A1;
}
.pressable-button:hover {
    transform: rotateX(5deg) rotateY(3deg) rotateZ(.25deg) translate(5.5px,6px);
}
.pressable-button:hover::before{
    inset: 0 5.5px 6px 0;
}

Gaming

Programming

Copied a hover effect but is not the same as the original