元素:我需要我的产品卡按钮打开链接

Question

我从codepen复制了产品卡。我不太懂代码，但我设法改变了颜色和东西，但我不能使这个按钮工作。

产品代码:

<div class="card">
<div class="imgBox">
<img src="https://toppng.com/uploads/thumbnail/valorant-11608280122mrhwm6iwqx.png" alt="mouse corsair" class="mouse">
</div>
<div class="contentBox">
<h3>Mouse Corsair M65</h3>
<h2 class="price">61.<small>98</small> €</h2>
<a href="#" class="buy">BRONEERI</a>
</div>
</div>
<style>
* {
margin: 0;
padding: 0;
font-family: "Istok Web", sans-serif;
}
.body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #212121;
}

.card {
position: relative;
width: 320px;
height: 480px;
background: #0f1923;
border-radius: 20px;
overflow: hidden;
}
.card::before {
content: "";
position: absolute;
top: -50%;
width: 100%;
height: 100%;
background: #ff4655;
transform: skewY(345deg);
transition: 0.5s;
}
.card:hover::before {
top: -70%;
transform: skewY(390deg);
}
.card::after {
content: "CORSAIR";
position: absolute;
bottom: 0;
left: 0;
font-weight: 600;
font-size: 6em;
color: rgba(0, 0, 0, 0.1);
}
.card .imgBox {
position: relative;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding-top: 20px;
z-index: 1;
}
/*
.card .imgBox img {
max-width: 100%;

transition: .5s;
}
.card:hover .imgBox img {
max-width: 50%;

}
*/
.card .contentBox {
position: relative;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 2;
}
.card .contentBox h3 {
font-size: 18px;
color: white;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
}
.card .contentBox .price {
font-size: 24px;
color: white;
font-weight: 700;
letter-spacing: 1px;
}
.card .contentBox .buy {
position: relative;
top: 100px;
opacity: 0;
padding: 10px 30px;
margin-top: 15px;
color: #FFFFFF;
text-decoration: none;
background: #ff4655;
border-radius: 30px;
text-transform: uppercase;
letter-spacing: 1px;
transition: 0.5s;
}
.card:hover .contentBox .buy {
top: 0;
opacity: 1;
}
.mouse {
height: 300px;
width: auto;
}
</style>

这是按钮打开的链接:

<div class="calendly-inline-widget" data-url="https://calendly.com/mokez/neace?hide_gdpr_banner=1" style="min-width:320px;height:630px;"></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>

Answer 1

尝试使用https://www.w3schools.com/学习HTML和js

<div class="card">
<div class="imgBox">
<img src="https://toppng.com/uploads/thumbnail/valorant-11608280122mrhwm6iwqx.png" alt="mouse corsair" class="mouse">
</div>
<div class="contentBox">
<h3>Mouse Corsair M65</h3>
<h2 class="price">61.<small>98</small> €</h2>
<a href="#" class="buy" onclick='showelement()'>BRONEERI</a>
</div>
<div id="showandhide" class="calendly-inline-widget"  style="min-width:320px;height:630px;display:none;"><iframe src='https://calendly.com/mokez/neace?hide_gdpr_banner=1'></iframe></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>
</div>
<style>
* {
margin: 0;
padding: 0;
font-family: "Istok Web", sans-serif;
}
.body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #212121;
}

.card {
position: relative;
width: 320px;
height: 480px;
background: #0f1923;
border-radius: 20px;
overflow: hidden;
}
.card::before {
content: "";
position: absolute;
top: -50%;
width: 100%;
height: 100%;
background: #ff4655;
transform: skewY(345deg);
transition: 0.5s;
}
.card:hover::before {
top: -70%;
transform: skewY(390deg);
}
.card::after {
content: "CORSAIR";
position: absolute;
bottom: 0;
left: 0;
font-weight: 600;
font-size: 6em;
color: rgba(0, 0, 0, 0.1);
}
.card .imgBox {
position: relative;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding-top: 20px;
z-index: 1;
}
/*
.card .imgBox img {
max-width: 100%;

transition: .5s;
}
.card:hover .imgBox img {
max-width: 50%;

}
*/
.card .contentBox {
position: relative;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 2;
}
.card .contentBox h3 {
font-size: 18px;
color: white;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
}
.card .contentBox .price {
font-size: 24px;
color: white;
font-weight: 700;
letter-spacing: 1px;
}
.card .contentBox .buy {
position: relative;
top: 100px;
opacity: 0;
padding: 10px 30px;
margin-top: 15px;
color: #FFFFFF;
text-decoration: none;
background: #ff4655;
border-radius: 30px;
text-transform: uppercase;
letter-spacing: 1px;
transition: 0.5s;
}
.card:hover .contentBox .buy {
top: 0;
opacity: 1;
}
.mouse {
height: 300px;
width: auto;
}
</style>
<script>
<script>
function showelement(){
if(document.querySelector('#showandhide').style.display==="none"){
document.querySelector('#showandhide').style.display="block"
} else {
document.querySelector('#showandhide').style.display==="none"
}
}
</script>
</script>