Buttons move the user to a the linked #POM - highlighting a box around the focused #POM would make it easier for the user to understand

“Buttons move the user to a the linked #POM - highlighting a box around the focused #POM would make it easier for the user to understand”

There are no features for this, on community topics. does anyone have any ideas how this could be done?

Thanks

Im not sure what #POM is but it sounds like you want an element to stand out from the rest of the page. Try simply adding a shadow to the element using the following css:

box-shadow: 0 8px 12px 1px rgb(29 17 51 / 4%), 0 3px 16px 2px rgb(9 32 77 / 12%), 0 5px 10px -3px rgb(29 17 51 / 12%);

thanks for this! To be a little clearer: As an example: When I click “sign up now” at the bottom of an unbounce page, it takes me to the top of the page to the sign up form. but around the sign up form there are other items (i.e. company values, welcome information etc…). When clicking the sign up button, is it possible for the sign up form to light up, or flash a its boarders to focus the attention of the user? I hope this helps, thanks.

I’m assuming you’re using AMP since this is in the AMP section of the forum…

Add the following css to your stylesheet:

.red-border{
      border: 3px solid #FF0000; 
}

and then your button that you want to trigger the red border should be custom html like this:

<button on="tap:YourFormID.toggleClass(class='red-border', force=true)">
  Go to form
</button>

This should add the style “red-border” to the element with the ID 'YourFormID" when the button is clicked.

Unfortunately this didnt work. It is not a published page yet. therefore it was only tested in preview mode. could this be a reason why it didnt work?

I can’t help so much without seeing your site’s code. Are you sure it’s an AMP page?

To be honest I don’t know. Would u be able to guide me as to how to find out

The first solution is for AMP pages, try just adding this to your javascript and changing the id’s to the respective IDs in your page

change “buttonID” to the ID of your button that will trigger the red border
change “boxID” to the ID of the element you want to receive the border

  	var yourButton = document.getElementById("buttonID");
  	var elementToChange = document.getElementById("boxID");
  	yourButton.addEventListener("click", function(){ elementToChange.style.border = "3px solid #ff0000"});

Unfortunately this didn’t work, could it have something to do with having the java script at the head, before or after tag?