CODEWITHSUNDEEP
htmlcssbutton
FrustratedCoder
FrustratedCoder

Reputation: 71

Changing height of button dramatically changes button styling

I have a very silly question, and was hoping for a bit of help.

I am working on a system someone else has developed (a lot of previous developers across the company, and varying quality levels in the code), where users can construct 'dashboards' for their stored data with various elements (Images, graphs, tables, text outputs, etc), using a WYSIWYG GUI interface.

One of the elements the user can add to their dashboards is a button. The user can modify settings against the button element, including its width and height. Changing the width is not an issue, but changing the height seems to change dramatically the look of the button. As soon as the height of the button is set to an explicit pixel height, a lot of other styling options seem to change.

Heres the code below, and a link to a very simple JS fiddle, showing its execution. Seems the second button now has a colour gradient, no rounded edges, and a more distinct border. I have stripped out functional code, just leaving it to the styling code.

<button style="width: 186px; font-family: Arial; font-size: 10pt; color: Black;">
    Perform Action
</button>

<button style="width: 186px; height: 124px; font-family: Arial; font-size: 10pt; color: Black;">
    Perform Action
</button>

http://jsfiddle.net/r3sct7b5/1/

What I need answered is how I should go about making these buttons consistent? Do I need to define all aspects of the button under css? Should just changing the height of the button change the buttons other qualities so dramatically?

Edit for clarity - this is what I'm seeing in my application, and the JSFiddle. Button on the left is the one with the unmodified height, button on the right is the one with the modified height.

enter image description here

Upvotes: 0

Views: 87

Answers (3)

Wings Tanar
Wings Tanar

Reputation: 1

7 years later this is still happening. A button with default height (or less) is different from a button with height 29 or greater. The give-away is that if you click on the larger button it goes grey, click on the smaller on, it goes blue - this is NOT an optical illusion. Given that others have not seen the problem, it is likely to be a MacOS implementation issue with tinter - so doesn't appear under Windows or Linux.

Upvotes: 0

Josh Warren
Josh Warren

Reputation: 306

There are no styling differences between the two buttons. The border and border radius are identical. The gradient is also identical, although it may appear more pronounced on the first button since it's transitioning between the two colors over a shorter height.

EDIT: Looking at your screenshot, that's not what I'm seeing. What browser are you using?

Upvotes: 1

sgoblin
sgoblin

Reputation: 167

On my screen, it still has the same styling, but in the small button, you can't see the gradient as easily.

In the large button, the rounded corners are not as obvious, but are still there and the same size.

The borders are the same on both buttons.

You may want a way to make the buttons look the same, and not have the optical illusions that you are seeing, and for that there are some libraries on GitHub such as Buttons.

Upvotes: 1

Related Questions