Adding Glow to Buttons (ADA Accessibility)

  • 21 April 2017
  • 8 replies
  • 109 views
H

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!

8 replies

digibomb
Userlevel 6
Badge +1

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.

H

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?

Rob
Userlevel 6

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;
  }
digibomb
Userlevel 6
Badge +1

@Rob thanks … I was too slow on the response 😛

Best of luck @hannamai !

Rob
Userlevel 6

Right time, right place 🙂

H

Thanks so much @Rob and @digibomb!

L

Hello! This is very helpful! I was wondering if there is a way to apply this to all buttons on the page so I can set it at a domain level? We have multiple variants set up for testing so this would save a lot of time and resources, and prevent human error 🙂

A

I actually tried applying the code to “lp-element” - I was hoping to affect anything on page - my end result was it got all the buttons in one go only.

Not every element, but all the buttons with only bit of code - still a win

Reply


Terms & ConditionsCookie settings