CSS Hover Animated Dash Border Help

First, this is not really a WordPress support question. You may get faster and better help from general programming forums like StackOverflow, or better yet, a beginner-friendly coding community like https://dev.to

I’m not a CSS a guru, but let me give this a shot. You have this comment in your pen:

/*When hovered, the text shifts position but it should not do that nor does the border color change to gradient*/

The text shifts position because you have a padding of 2em. Of course, the text will have to shift around to make space for this padding (and even for the border).

And as to why your gradient isn’t working, I put your code into W3’s CSS validator, and it throws a “NOT BORDER COLOR” validation error: https://jigsaw.w3.org/css-validator/validator

From MDN’s documentation:

The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the <gradient> data type, which is a special kind of <image>.

So that would explain why linear-gradient cannot be used as a border-color — and why your code isn’t working at all. You’d have to use border-image which doesn’t work in all browsers, or play with background-image to have your linear-gradient to work.

As to the actual transition effect you’re trying to create, that is way over my head: I didn’t even think you could do it in pure CSS, but after looking at some cool CSS-only animations and transition effects online now, you probably can.

Hello @hifumi,

The effect you’re trying to achieve is rather complex. As @gappiah mentioned, you’re better of asking for help on somewhere like StackOverflow or DEV.to. Linear gradients won’t work with dashed borders, for instance.

Please see the following for how to create gradient borders:

https://www.digitalocean.com/community/tutorials/css-gradient-borders-pure-css
https://css-tricks.com/gradient-borders-in-css/

And for animating the borders, you can see:

https://codepen.io/giana/pen/yYBpVY/

Thank you, I’ll try building it bit by bit starting with the borders showing up > adding hover effect > adding gradient color > etc. and see where it goes. If successful, I’ll update the codepen for future reference.

I thought it would be possible because I’ve seen this:

https://codepen.io/simeydotme/pen/rVqrrN

I thought it would be possible because I’ve seen this:

https://codepen.io/simeydotme/pen/rVqrrN

This pen is using the background shortcut, where you are using background-color specifically. Plus, this pen has a lot more stuff that yours doesn’t have.

You’re welcome. It’s not possible using CSS border styling but there are ways around it like using the background element. This article explains how to do that: https://css-tricks.com/gradient-borders-in-css/