-1

I have this embed code:

<center><link rel="stylesheet" type="text/css" href="https://s3.amazonaws.com/bucket-io-widget-assets/home/styleBucket.css"><button style="font-size: 24px;background-color:#7dba3f;color:#FFFFFF;border:2px solid black;border-color:white;padding:10px 20px;cursor:pointer" onclick="lunchModal('https://go.bucketforms.com/sf/7ee7ca1c')" id="myBtnBucket" class="btn-outline-bucket gtm-cta">Claim Guide</button><div id="myModalButton" class="modalBucket"><div class="modal-content-bucket"> <span class="close-bucket">X</span></div></div> <script src="https://s3.amazonaws.com/bucket-io-widget-assets/home/scriptBucket.js" type="text/javascript"></script></center>

The button ID is "myBtnBucket" an the class is "btn-outline-bucket gtm-cta", but when attaching some CSS to that class, it's not working. Here's a JSFiddle.

Thanks.

Damian At Tla
  • 5
  • 3

1 Answers1

0

I'm assuming you wanted to set the background of the button to red, with the following css it works. I removed the a, because there is no a element.

The !important tag basically overrules any style given directly in the style="" of the element, some better explenation here.

.btn-outline-bucket.gtm-cta:hover{
    background-color: red !important;
}
täm
  • 56
  • 1
  • 4