边界半径对锚链悬停的影响

Question

I'm trying to create a button, which on hover, creates a gradient depending on which part of the button is being hovered on. The inspiration for this was adapted from here

However, I'm unable to replicate it's functionality for my markup. I've tried to wrap the classes around a div (rather than a button ) but still no luck.

 document.querySelector('.btn--hoverGradient').onmousemove = (e) => { // const x = e.pageX - e.target.offsetLeft // const y = e.pageY - e.target.offsetTop var rect = e.target.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; e.target.style.setProperty('--x', `${ x }px`) e.target.style.setProperty('--y', `${ y }px`) } 

 a{ text-decoration: none; } .btn--hoverGradient { position: relative; appearance: none; border: none; cursor: pointer; outline: none; overflow: hidden; border-radius: 100px; } .btn--hoverGradient a { position: relative; pointer-events: none; } .btn--hoverGradient::before { --size: 0; content: ""; position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size); transform: translate(-50%, -50%); transition: width 0.2s ease, height 0.2s ease; } .btn--hoverGradient-darkGrey { background: radial-gradient(circle closest-side, #FFF, transparent); } .btn--hoverGradient:hover::before { --size: 400px; } .btn--core { border: 0; outline: 0; display: inline-block; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; text-align: center; user-select: none; border-radius: 0.25rem; padding: 11px 40px; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; font-size: 1.25em; } .btn--darkGrey { font-family: "Raleway", sans-serif; font-weight: 700; color: #FFFFFF; background-color: #293440; } 

 <div class="btn--hoverGradient btn--hoverGradient-darkGrey"> <a href="#" class="btn--core btn--darkGrey">test</a> </div> 

Where am I going wrong?

Answer 1

In css,

.btn--hoverGradient-darkGrey {
  background: radial-gradient(circle closest-side, #FFF, transparent);
}

should be,

.btn--hoverGradient-darkGrey:before {
  background: radial-gradient(circle closest-side, #4405f7, transparent);
}

You made it a white color, that is the reason you couldn't see the effect and secondly you missed ':before'

Still the effects are not same as the one in the link.

Answer 2

In addition to the changes what @Shoyeb has mentioned, do these changes and it should work fine.

First, remove background color from 'btn--darkGrey' class and place it in your parent division's class 'btn--hoverGradient'.

Second, put 'position:relative;' in 'btn--core' core class.

 document.querySelector('.btn--hoverGradient').onmousemove = (e) => { // const x = e.pageX - e.target.offsetLeft // const y = e.pageY - e.target.offsetTop var rect = e.target.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; e.target.style.setProperty('--x', `${ x }px`) e.target.style.setProperty('--y', `${ y }px`) } 

 a{ text-decoration: none; } .btn--hoverGradient { position: relative; appearance: none; border: none; cursor: pointer; outline: none; overflow: hidden; border-radius: 100px; width:400px; background-color: #293440; } .btn--hoverGradient a { position: relative; pointer-events: none; } .btn--hoverGradient::before { --size: 0; content: ""; position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size); transform: translate(-50%, -50%); transition: width 0.2s ease, height 0.2s ease; } .btn--hoverGradient-darkGrey:before { background: radial-gradient(circle closest-side, #4405f7, transparent); } .btn--hoverGradient:hover::before { --size: 400px; } .btn--core { border: 0; outline: 0; display: inline-block; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; text-align: center; user-select: none; border-radius: 0.25rem; padding: 11px 40px; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; font-size: 1.25em; position:relative; } .btn--darkGrey { font-family: "Raleway", sans-serif; font-weight: 700; color: #FFFFFF; } 

 <div class="btn--hoverGradient btn--hoverGradient-darkGrey"> <a href="#" class="btn--core btn--darkGrey">test</a> </div>