Jump to content

Adding Hover Over Effects to Embedded Acuity Buttons

Recommended Posts

Hi there, 

Squarespace newbie here ...but picking up things nicely.

So, I have embedded a few direct Acuity Scheduling buttons into my website, but I am not able to add a hover over effect to these buttons as I can to normal squarespace buttons. 

E.g. The embed code of the acuity button is:

<a href="https://app.acuityscheduling.com/schedule.php?owner=18701995&appointmentType=category:%20%20%20%20%20%20CONSULTATIONS" target="_blank" class="acuity-embed-button" style="background: #324157; color: #fff; padding: 8px 12px; border: 0px; -webkit-box-shadow: 0 -2px 0 rgba(0,0,0,0.15) inset;-moz-box-shadow: 0 -2px 0 rgba(0,0,0,0.15) inset;box-shadow: 0 -2px 0 rgba(0,0,0,0.15) inset;border-radius: 4px; text-decoration: none; display: inline-block;">Schedule Appointment</a>
<link rel="stylesheet" href="https://embed.acuityscheduling.com/embed/button/18701995.css" id="acuity-button-styles" />
<script src="https://embed.acuityscheduling.com/embed/button/18701995.js" async></script>

I tweaked the code per the below, with no success:

<a href="https://app.acuityscheduling.com/schedule.php?owner=18701995&appointmentType=category:%20%20%20%20%20%20CONSULTATIONS" target="_blank" class="acuity-embed-button" style="background: #324157; color: #fff; padding: 8px 12px; border: 0px; -webkit-box-shadow: 0 -2px 0 rgba(0,0,0,0.15) inset;-moz-box-shadow: 0 -2px 0 rgba(0,0,0,0.15) inset;box-shadow: 0 -2px 0 rgba(0,0,0,0.15) inset;border-radius: 4px; text-decoration: none; display: inline-block; .acuity-embed-button:hover {background-color:#f4f3f0 !important; color:#000000 !important; box-shadow: 6px 6px 6px #324157 !important;} ">Schedule Appointment</a>
<link rel="stylesheet" href="https://embed.acuityscheduling.com/embed/button/18701995.css" id="acuity-button-styles" />
<script src="https://embed.acuityscheduling.com/embed/button/18701995.js" async></script>

My website is www.purnamayurveda.com.  On the Services>Consultations page, the 1st button on the page has the hover over effect activated but the other 2 buttons don't, because they are embedded acuity buttons. 

Please could someone help? 

Many thanks in advance!!

Akanksha 

Link to comment

Target button 2 with this code

div#block-yui_3_17_2_1_1588501084510_6610 a:hover {
    background: red !important;
    color: violet !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.