Adding Glow to Buttons (ADA Accessibility)


#1

I’m currently working on some landing pages that need to be ADA compliant and a client has requested for us to add focus and glow to all buttons on our landing pages. I was able to find a very helpful thread ([Tips & Scripts] Form Field Focus and Glow) on adding focus and glow to form fields; however, I’d like to do the same for buttons on my page.

Any help would be appreciated. Thank you!


#2

Hey @hannamai
For the glow all you need to do is add this code to your CSS styles:

<style>
  
  div.lp-pom-root a.lp-pom-button {
	  from { background-color: #749a02; -webkit-box-shadow: 0 0 0 #333; }
 	  to { background-color: #91bd09; -webkit-box-shadow: 0 0 18px #91bd09; }
     -o-transition:.5s;
 	  -ms-transition:.5s;
 	  -moz-transition:.5s;
  	 -webkit-transition:.5s;
 	  /* ...and now for the proper property */
     transition:.5s;
    -webkit-animation-iteration-count: 1;
}
  
  #lp-pom-button-9 {
     background-color: #749a02 !important;
     border-radius: 0.5em;
     color: #fff !important;
     padding: 0.5em;
     text-decoration: none;
}
  
  #lp-pom-button-9:hover {
     background: #91bd09 !important;
     color: #fff !important;
     -webkit-box-shadow: 0 0 18px #91bd09;
  }

Make sure to change the button ID (#lp-pom-button-9) to your button ID. Here’s a working example http://unbouncepages.com/button-glow/

Let me know if you have any Qs.


#3

Hi @digibomb,

Thanks so much for the reply. I was able to successfully incorporate the CSS; however, it still seems like the the button isn’t glowing when I tab through the content. When I use the script and CSS from the URL I noted in my previous post, I’m able to tab through and have the glow indicate where I’m at on the page. Is it possible to include this same functionality so that when users tab on my landing page the button will glow when they are on it?


#4

You’ll need to add one more bit of CSS for the tab functionality (focus):

#lp-pom-button-9:focus {
    background: #91bd09 !important;
    color: #fff !important;
    -webkit-box-shadow: 0 0 18px #91bd09;
  }

#5

@Rob thanks … I was too slow on the response :stuck_out_tongue:

Best of luck @hannamai !


#6

Right time, right place :slight_smile:


#7

Thanks so much @Rob and @digibomb!