Button border color transition

HTML & CSS
1

I have a problem my href button does not transition border colors

.button {
    display: inline-flex;
    width: auto;
    cursor: pointer;
    align-items: center;
    border-style: none;
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
    padding: 0.63rem 1.5rem 0.558rem;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 300;
    line-height: 1.5;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 0.5s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    border-radius: 1.5rem;
	text-decoration: none !important;
}

.button.button-primary {
    position: relative;
    justify-content: center;
    background-color: transparent;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.button.button-primary:before {
    content: "";
    position: absolute;
    z-index: 0;
    display: block;
    height: 100%;
    width: 100%;
    transition-duration: 0.5s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    border-radius: inherit;
    background: linear-gradient(90deg, #ffbd33, #fd6c3c 15%, #3ccdfd 31.5%, #76cf78 49%, #ffbd33 51%, #fd6c3c 66%, #3ccdfd 82.5%, #76cf78);
    background-size: 200% 200%;
    transition-property: background-position;
}

.button.button-primary:after {
    content: "";
    position: absolute;
    z-index: 10;
    display: block;
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
    transition-property: color, background-color, border-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 0.15s;
    transition-duration: 0.5s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    border-radius: inherit;
	text-decoration: none !important;
}
.button.button-primary .text {
    position: relative;
    z-index: 20;
}

<a class="button button-primary" href="#"><span class="text"> Home</span></a>
2

I don’t see a border value in that code? You have border : none

Were you referring to the rainbow coloured linear gradient background that just peaks out of the edges?

I also don’t see where a transition can happen as you need to go from one state to another such as on hover to have a transition effect. Unless you are dynamically adding a new class somewhere.

Gradients can’t really be transitioned anyway but they can be moved for an effect of sorts. .

(They can now actually be transitioned with the new & property syntax but its a little complicated

3

i want to animate these color gradient, even if i remove border-style from none. nothing happens

4

What does the border have to do with the gradient. I’m a little confused :slight_smile:

You didn’t answer my questions either.

When is the transition supposed to take place?

For example do you want it to transition when hovered? Or do you actually want a constant animation that continuously animates?

Where have you defined the new transitioned to state? What colours are you transitioning to?

I need to know the answers to this questions before I can offer code to help :slight_smile:

As I said above you can’t actually animate the background image property which gradients are created from but you can do the things shown in the video I posted such as animating it’s size or position.

5

a constant animation that continuously animates

Same border colors to rotate color to color

6

You don’t have any border as I said above but never mind because I think you mean the gradient background which gives the illusion of a border but is actually a gradient behind the black button.

Its not possible to animate the gradient colours as I already explained (not for all browser yet) but you can do effects such as changing the background size or indeed just rotating the whole thing.

Here is a demo using your code with just a few additions for the keyframe animation.

All your transition code does nothing in that example and could be removed but I didn’t want to do that because I’m assuming you grabbed this code from somewhere else and those transitions may have been part of a hover effect which could be transitioned.

1 Like
7

thank you so much

1 Like