To create a "wishlist" button with a heart icon design, you can use HTML and CSS, along with a suitable font icon library like Font Awesome for the heart icon. Here's an example:
**HTML for Wishlist Button:**
```html
<!-- Add this button to your product page -->
<button id="wishlistButton" class="wishlist-button" onclick="toggleWishlist(123)">
<i class="fas fa-heart"></i> Add to Wishlist
</button>
```
In this example, we're using the `<i>` element with the `fas fa-heart` class from Font Awesome to display a heart icon.
**CSS for Styling the Wishlist Button:**
```css
/* Add this CSS to your stylesheet to style the wishlist button */
.wishlist-button {
background-color: transparent;
border: none;
color: #d9534f; /* Heart color */
font-size: 18px;
cursor: pointer;
}
.wishlist-button i {
margin-right: 5px; /* Space between the heart icon and text */
}
/* Style the heart icon on hover */
.wishlist-button:hover {
color: #e74c3c; /* Change color on hover */
}
```
In the CSS code above, we set the button's style, color, and size. We also change the heart icon's color when the button is hovered over to provide visual feedback.
Ensure that you have included the Font Awesome library in your HTML document to make use of its icons. You can add the following line within the `<head>` section of your HTML:
```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
```
Remember to replace `123` with the actual product ID as needed, and you can further customize the CSS to match your website's design.
Here many types of latest technology news, many useful (tools, software, apps, website, technical problem solution )If you have any query regrading Site, Advertisement and any other issue, please feel free to contact me