Css mouse hover for links

[Richardz]

Good morning, everyone,

I would like to customize my links with some css code.

I found this solution on codepen:

What I want to do is apply this css style to my entire website (and so not to use css class).

For highlighting, I would also have liked to have a rectangular background (radius: 0.25em) with a gradient color background (I use this solution to create my color gradients: https://cssgradient.io/)

Do you have a solution for me, please?

Thank you all and have a good day:)

(my website : https://www.jadranko.com/ )

[andreiv]

Hi Richard,

Our support does not cover this kind of customizations but I will try to help you out.
Here is a great starting point with a different approach that will work better with our theme.

a:after{
  content: '';
  background: #ff9800; /* this is your highlight color */
  width:100%;
  height:4px;
  position:absolute;
  bottom:0;
  left:0;
  display:block;
  transition: all .2s ease;
  z-index: -1;
}
a:hover:after {
  height:100%;
  border-radius: 0.25em;
  width:calc(100% + 20px);  /* feel free to remove this one if you don't want highlight to grow on hover */
  margin-left:-10px;  /* feel free to remove this one if you don't want highlight to grow on hover */

}

[Richardz]

@andreiv

a:after{
content: ‘’;
background: #ff9800; /* this is your highlight color /
width:100%;
height:4px;
position:absolute;
bottom:0;
left:0;
display:block;
transition: all .2s ease;
z-index: -1;
}
a:hover:after {
height:100%;
border-radius: 0.25em;
width:calc(100% + 20px); / feel free to remove this one if you don’t want highlight to grow on hover /
margin-left:-10px; / feel free to remove this one if you don’t want highlight to grow on hover */

}

Thank you @andreiv !

[jade]

You’re most welcome, Richard.