Make button link - Javascript

Question

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?

I don't know how the script works but maybe you could just replace the <img> tag with your text and add class="button button1" to your <a> tag. — Cave Johnson
– Cave Johnson, Commented Sep 17, 2016 at 0:57
Please clarify your request here...: "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." — Brian Schroeter
– Brian Schroeter, Commented Sep 17, 2016 at 0:58

Aravinth Raja · Accepted Answer · 2016-09-21 04:26:53Z

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

Text of Setmore button
Add Hover Effect

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

Fernando Maia · Accepted Answer · 2016-09-17 01:01:27Z

1

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

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

answered Sep 17, 2016 at 1:01

Fernando Maia

112 bronze badges

Collectives™ on Stack Overflow

Make button link - Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related