Question

Weird Button Behavior

Forms Version 10

Updated April 12, 2024

asked on April 11, 2024

Hi! I used Chat GPT to generate some css and html to create a button for me to link to a website, but it has some strange behavior that I'd like to get rid of. Here's the current css:

.button {
    background-color: #083D20;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: block; /* Change display to block to center horizontally */
    margin: 0 auto; /* Set margin to auto to center horizontally */
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    box-sizing: border-box;
  	margin-bottom: 16px; /* Add some margin at the bottom */

}

.button:hover {
    background-color: #AC923C;
  	color: black;
}

And here's the HTML:

<p></p><a href="https://www.cityofsouthlake.com/DocumentCenter/View/36992/Employee-Drug-Testing-Policy" class="button" target="_blank">City of Southlake Drug-Free Workplace Policy</a>

As for the strange behavior, when hovering over it, a non-uniform border (thicker on top) around it is highlighted, but is not clickable. Currently, in the on-hover image below, you must click within the green area to be taken to the link. I want the whole button to function as a singular button so that no matter where you hover your mouse, the whole thing changes color, and no matter where you click, you're taken to the relevant link. Any thoughts?

Non-hover:

On-hover:

0 0

Answer

SELECTED ANSWER

replied on April 11, 2024 • Show version history

First thing I notice is that you have an extra paragraph element in your custom HTML which is probably why you're getting that extra space.

It looks like you also added that class in the Custom Classes under Advanced Settings which would explain why it has "extra" with the background color enabled (i.e., it is applying the styling to the parent too instead of just the button).

I haven't been able to reproduce the "exact" same behavior in v11, but when I apply the class to the parent custom html it seems very similar to what you described in the original post (see below).

What is happening here is that the Custom HTML parent is also getting the same styling, so it has the padding, color, and hover style meant for the button, which is not what you want.

1 0

Replies

replied on April 11, 2024 • Show version history

You are likely experiencing a class collision with the name "button" I can't confirm with v10, but in the latest version of LF your button looks like this:

and on hover

try changing the css class to something more unique:
CSS:

.my-link-button {
    background-color: #083D20;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: block; /* Change display to block to center horizontally */
    margin: 0 auto; /* Set margin to auto to center horizontally */
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    box-sizing: border-box;
  	margin-bottom: 16px; /* Add some margin at the bottom */

}

.my-link-button:hover {
    background-color: #AC923C;
  	color: black;
}

HTML:

<a href="https://www.cityofsouthlake.com/DocumentCenter/View/36992/Employee-Drug-Testing-Policy" class="my-link-button" target="_blank">City of Southlake Drug-Free Workplace Policy</a>

3 0

View 5 previous replies

replied on April 11, 2024

Hey Zachary! Thanks so much for your response! I tried your code and sadly don't see any difference on 10.4. I suppose it's good to know that it's a version issue though and not necessarily incorrect code. I have a feeling I'll have to chalk this one up as a loss.

Thanks again though, and have a great rest of your day!

0 0

replied on April 11, 2024

Hmm there is no CSS that specifies your button to have a border, that is why I mentioned class name collisions. If anything it would be a browser issue? Or there is something weird going on with the rendering of the button on your form which would be an LF issue.
Sorry I cant be of more help there.

0 0

replied on April 11, 2024 • Show version history

Dylan, if you right click on the button and select Inspect, you can go into the browser console and manually enable the "hover" state.

Once that is done, it will be easier to track down what styling is being applied to determine what class you might need to change.

You should see one or more styles with ":hover" in the selector.

Based on the screenshots, it looks like there's an additional element around your button that's responsible for the additional padding, so getting that section of the HTML could also help in narrowing it down.

0 0

replied on April 11, 2024

@Jason Smith, thank you very much! When toggling through different elements, it looked at first like disabling the background color for the button did the trick, but then when I hovered over the button with the "force element state" ":hover" still enabled, it expanded the size of the button to the same bounds as when the green border was present. Any ideas?

0 0

SELECTED ANSWER

replied on April 11, 2024 • Show version history

First thing I notice is that you have an extra paragraph element in your custom HTML which is probably why you're getting that extra space.

I haven't been able to reproduce the "exact" same behavior in v11, but when I apply the class to the parent custom html it seems very similar to what you described in the original post (see below).

What is happening here is that the Custom HTML parent is also getting the same styling, so it has the padding, color, and hover style meant for the button, which is not what you want.

1 0

replied on April 11, 2024

Ya, you are probably correct on that one. Good catch

0 0

replied on April 12, 2024

Ah ha! That was exactly the issue, Jason! I didn't realize I'd defined the css class both in the html as well as under the Advanced tab of that HTML field. Removing it from the advanced tag and leaving it only in the HTML itself produced the exact button I was looking for. Thanks so much!!!

0 0

replied on April 12, 2024

You're very welcome. Glad to hear you got it working!

0 0

You are not allowed to follow up in this post.

Question

Question

Weird Button Behavior

Answer

Replies

Sign in to reply to this post.