On my WordPress Elementor website, I am looking to have the button on my product card linked to a specific

I found a product card design on codepen.io and tried to customize it by changing the colors. However, I'm struggling to get the button to work.

Here is the product card code snippet:

<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>

Finally, here is the link that the button should open:

<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>
javascripthtmlcss

Answer №1

Check out https://www.w3schools.com/ to enhance your knowledge of HTML and JavaScript.

<div class="card">

  <div class="imgBox">
    <img src="https://toppng.com/uploads/thumbnail/valorant-11608280122mrhwm6iwqx.png" alt="Corsair Mouse" class="mouse">
  </div>

  <div class="contentBox">
    <h3>Corsair M65 Mouse</h3>
    <h2 class="price">61.<small>98</small> €</h2>
    <a href="#" class="buy" onclick='showelement()'>BOOK NOW</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>
function showelement(){
if(document.querySelector('#showandhide').style.display==="none"){
document.querySelector('#showandhide').style.display="block"
} else {
document.querySelector('#showandhide').style.display==="none"
}
}
</script>
</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

GWT Validation - Enhance Your Application with a Third Party Library

Is there a reliable JavaScript library available for validating GWT fields such as Email, Text Length, Phone Number, Date & SSN, etc.? I am unable to use the GWT Validation Framework or GWT Errai in my application because I receive responses as JSON r ...

javascriptjquerygwtparsley.jsjsni

How to Perfectly Align a Div (Form) in Bootstrap 4

As I delve into the realm of Bootstrap, I am faced with a challenge in centering a form on my webpage. I have utilized CSS styling to ensure that both the html and body tags span 100% of the page's height. Additionally, I have created two divs: one ou ...

cssbootstrap-4pug

Is it possible to assign a value to a React hook within a promise?

After retrieving data from a promise, I need to store it in a React hook. However, this process is causing infinite requests and continuous re-rendering of the page. Additionally, I only want to fill specific data. const [rows, setRows] = useState([]); ...

javascriptreactjspromiserequestreact-hooks

Unable to execute the new firebase on node server

I'm currently watching this google talk. However, I am facing an issue trying to create a firebase object. Following my package.json file, I initiated with: npm install firebase --save Then proceeded with the following steps: let Firebase = requir ...

javascriptnode.jsnpmfirebase

Tips for managing both DOM manipulation and state changes at the same time in AngularJS

<div my-custom-directive> <button id="myButton" ng-click="handleClick(mymodel.id)"><button> </div> app.controller('myCtrl', function($scope) { $scope.handleClick = function(id) { //Perform state change here without ...

javascriptangularjsdom

The Server Side does not recognize JavaScript values when transferred to HTML

Here is the function I've created for the onchange event: This is my Javascript code: function optionsModel() { var x = document.getElementById("model"); var option = document.createElement("option"); var makeValue = documen ...

javascriptc#htmlasp.net

OceanWP Theme with a Fixed Navigation Bar

Currently utilizing the oceanwp theme, I'm aiming to create a topbar that vanishes while scrolling and have the menu smoothly transition to the topbar location with some opacity. I attempted the following code snippet: #site-header { position: fixe ...

csswordpress

Sorting arrays with multiple items in Javascript may seem like a daunting task at first,

My goal is to arrange three arrays (array1, array2, and array3) in ascending order based on their first element to display the following sequence. 1, banana, 2, grapes, 3, oranges. Even though I've written the code below, I am facing difficulty sort ...

javascriptarrayssorting

Wave of the figure in three.js

I have sculpted a humanoid figure and now I am attempting to animate the figure waving with its left hand when the waveButton is clicked. I established a hierarchy where the body element is the parent, with leftArm, rightArm, leftLeg, rightLeg, and head as ...

javascriptthree.js

Error: Missing 1 type argument(s) in generic type definition

I've developed an abstract class structure as shown below: export abstract class CsvFileReader<T> { data: T[] = [] constructor(public file: string) {} abstract mapRow(row: string[]): T read() { this.data = this.file .split(& ...

javascripttypescript

What could be causing my website to extend beyond 100% width?

I've been working tirelessly on solving this issue for the past week, but unfortunately, I haven't had any luck finding a solution. The problem arose as I was designing a launch page for a program that my friend is developing. Despite setting the ...

htmlcssweb

Convert the values from the table cells into an array

Recently, I've been working with jQuery to extract an array from table cells, format the data, and pass it into a JavaScript function. The code snippet I have implemented is as follows: var l1 = new Array(); $('table#datatable tbody td:firs ...

javascriptjqueryarrays

Having trouble fetching JSON data using Ajax in Flask

I am working on creating a straightforward web application for displaying logs. The backend is powered by Python 3.4 and Flask, while the frontend consists of a simple web form with AJAX integration. Flask: import json from flask import Flask, jsonify, r ...

javascriptjquerypythonajaxjson

Using regular expressions in JavaScript to permit a particular phone number pattern of (123) 456-7890 exclusively

I have implemented a phone number validation function for a web app. However, when this information is displayed in a windows app using a specific function that populates data to controls, it only accepts phone numbers in the format of (123) 456-7890. ...

javascriptregex

Issue: The data type 'void' cannot be assigned to the data type 'ReactNode'

I am encountering an issue while calling the function, this is just for practice so I have kept everything inside App.tsx. The structure of my class is as follows: enum Actor { None = '', } const initializeCard = () => { //some logic here ...

javascriptreactjstypescripttypescript3.0react-tsx

Can I display different text when blinking with Javascript?

I need to display text that changes every few seconds within a single div. var blink_speed = 1000; // every 1000 == 1 second, adjust to suit var t = setInterval(function () { var ele = document.getElementById('myBlinkin ...

javascriptarraysblink

Instructions for creating an undo feature on a canvas

I'm working on an HTML5 canvas drawing pad and need to implement an undo button. Any suggestions? My initial approach was to use an array stack to save the canvas image every time the mouse is released after drawing, but it didn't work as expect ...

javascripthtmlcanvas

Problem with Marionette AppRouter compatibility when used with Browserify

app.js module.exports = function () { if (!window.__medicineManager) { var Backbone = require('backbone'); var Marionette = require('backbone.marionette'); var MedicineManager = new Marionette.Application(); Medicin ...

javascriptbackbone.jsnpmmarionettebrowserify

Verify if any date/time within an array is later than the current local time by utilizing Luxon and Moment.js

I am currently receiving 2 sets of times based on some JSON data. I aim to compare the current local time and determine if it is greater or less than any date in my JSON structure. const result = [ { "carId": "13122656-169f-45fa-be47 ...

javascriptmomentjslodashluxon

JQuery: the art of concealing and revealing

My current setup seems to be functioning, but I can't shake the feeling that it's not quite right. CSS: #logo { display:none; } JQuery: $("#logo").delay(800).fadeIn(800); While this configuration works, I'm concerned about whether j ...

jquerycssfadein