CODEWITHSUNDEEP
javascripthtmlcss
Isaac Antóine
Isaac Antóine

Reputation: 1

Make button link - Javascript

I have this code to embed on my site from Setmore to allow appointment booking on the website, this opens a popup in the website like you would expect on a hotel booking website.

<script id="setmore_script" type="text/javascript" src="https://my.setmore.com/js/iframe/setmore_iframe.js"></script><a id="Setmore_button_iframe" style="float:none" href="https://my.setmore.com/bookingpage/c6461561-7478-43ef-97ee-d4e8d6c89436"><img border="none" src="https://my.setmore.com/images/bookappt/SetMore-book-button.png" alt="Book an appointment with HouseKeep using SetMore" /></a>

This uses a really boring button so I made a custom one in photoshop to replace. However, I wanted to make one in CSS so that it changes when the user hovers over it. 

<Center>
<button class="button button1">BOOK NOW</button>
</Center>

<style>
.button {
background-color: #2f896b; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}

.button1 {
background-color: white;
color: black;
border: 2px solid #2f896b;
}

.button1:hover {
background-color: #2f896b;
color: white;
</style>

I Would like to make it so that I can use the button that I've made but it still has the exact same functionality as the image being there in the original code to code to embed. Any ideas?

Upvotes: 0

Views: 208

Answers (2)

Aravinth Raja
Aravinth Raja

Reputation: 429

By Adding this below CSS you can easily override the Setmore button. This Below CSS will help you to do following changes

  1. Text of Setmore button
  2. Add Hover Effect

  3. Change Button Style 

    a#Setmore_button_iframe
{
   position: relative;
}
a#Setmore_button_iframe > img {
   display: none;
}
a#Setmore_button_iframe:after 
{
    content:"Book  Free Appointment"; /* TEXT YOU WANT */
    position: absolute;
    left: 0;
    top: 100%;
    white-space: nowrap;
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
   -webkit-transition-duration: 0.4s; 
   transition-duration: 0.4s;
   cursor: pointer;
   background-color: white;
   color: black;
   border: 2px solid #27C3BB;
   font-family: sans-serif;
}
a#Setmore_button_iframe:hover:after {
  background-color: #27C3BB;
  color: white;
}

For Demo Check this link Setmore Custom Button

Upvotes: 6

Fernando Maia
Fernando Maia

Reputation: 11

Have you tried setting button's background to the one you made? Check it below:

background: url("../images/button.png") no-repeat;

Upvotes: 1

Related Questions