我正在尝试创建一个按钮,该按钮在悬停时会根据要悬停在按钮的哪个部分上来创建渐变。灵感来自here
但是,我无法为标记复制它的功能。我试图将类包装在div周围(而不是button
),但还是没有运气。
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>
我要去哪里错了?
答案 0 :(得分:0)
在CSS中,
.btn--hoverGradient-darkGrey {
background: radial-gradient(circle closest-side, #FFF, transparent);
}
应该是
.btn--hoverGradient-darkGrey:before {
background: radial-gradient(circle closest-side, #4405f7, transparent);
}
您将其设置为白色,这就是您看不到效果的原因,其次您错过了':before'
效果仍然与链接中的效果不同。
答案 1 :(得分:0)
除了@Shoyeb提到的更改之外,请进行这些更改,并且应该可以正常工作。
首先,从“ btn--darkGrey”类中删除背景色,并将其放置在父部门的“ btn--hoverGradient”类中。
其次,输入“ position:relative;”在“ btn--core”核心类中。
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>