Photoshop Question posted in
The official user guide can be found here.

Make button link – Javascript – Photoshop

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?

Tags:

2

Answers


  1. 0

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

    background: url("../images/button.png") no-repeat;
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search