Button coding questions

Just wanted to verify something…

To code the functionality of a button element, am I right in thinking the current/proper way would be to surround the button element (dragged in from the library) with an anchor tag? I know that works and all, but I wasn’t sure if that was the proper/official way to do it these days, or if there was some more appropriate method.

Also, in order to get rid of the default underline caused by the anchor tag, is the correct approach to add a CSS rule to hover state of the anchor itself to counter it? You have to do it to the anchor tag, and not the button element, correct? Just wanted to make sure, as it seems kind of messy having separate CSS rules for both the anchor tag as well as the button element, and I wasn’t sure if it could be done via rules to just the button.

Just checking…

Hi ladlon,
a button tag will never be surrounded with anchor tag. They are mostly activated via javascript. See this example from
https://www.w3schools.com/tags/tag_button.asp

<button type="button" onclick="alert('Hello world!')">Click Me!</button>

But it is usual to style an anchor with a class .button e.g. and use this as usual with a url as link. This hopefully answers your second question.

<a class="button" href="#" target="_blank">Buttontext</a>

1 Like

Hi, aquorange. Thanks for the response.

Ya, I was just unsure which of the available methods is considered most proper these days. It seems, from what I’ve read elsewhere, that it’s better to use the anchor tag, rather than use a button tag (browser support?). I assume that the button class is a bootstrap default. I’ll have to test that out.

I have been using the anchor method, rather than dragging buttons (button tag) from the library. I initially got confused when the button tags from the library didn’t seem to have any visible means to code a link, but maybe I missed something there. I know from the older tutorial vids, the pre-v4 versions of Pinegrow did have an obvious Link field to add functionality to the buttons, but I could’t find that in v4 when I first started.

I think one thing I still have to figure out, is how to do rollovers for image-based buttons, in Pinegrow 4. it’s been a while since I’ve done one of those things, and I’m not sure if methods have changed since.