Creating a cohesive design by ensuring buttons match the appearance of other elements, and vice versa

During the process of building a website, I encountered a challenge in making buttons work seamlessly with other elements to ensure uniformity in appearance.
This issue often arises in menus, where some buttons are functional while others are simply linked to different pages. Another example is seen in forms, where buttons should match the size of other input fields.
Take a look at this jsFiddle link to grasp the concept. I aim to make buttons blend in with other elements!
Here's a snippet of code as per SO guidelines:

HTML:

Ensuring consistency in element sizes
<div id="menulike">
    <button>DO SOMETHING</button>
    <a href="#something">GO TO SOMETHING</a>
</div>

CSS:

div#menulike button, div#menulike a {
    /*resetting default styles*/
    border-style: none;
    border-width: 0px;
    text-decoration: none;

    /*Inline or inline-block*/
    display: inline;
    display: inline-block;
    /*color scheme and aesthetics*/
    color: white;
    font-weight: bold;
    background: black;

    /*Maintaining equal size is crucial*/
    padding: 3px;
    margin: 1px;
    width: 220px;


    font-size: 12pt;
    text-align: center;
}

Answer №1

What causes this issue?

The discrepancy in appearance between elements sharing the same styling is a result of default styling that is inherent to each element. This disparity can also be influenced by variations across different browsers.

How can you address this concern?

To resolve this issue, it is essential to override any conflicting properties among the elements. Utilizing CSS resets can effectively eliminate inconsistencies caused by browser differences.

Why isn't my specific example functioning as expected?

In relation to your specified problem, the differing width of the button may be attributed to incomplete overriding of the button's CSS properties. To rectify this, try incorporating the following adjustments to your text inputs:

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

Implementing these changes should ensure uniform width. Alternatively, assigning box-sizing: content-box to the button may align its sizing with other elements by reverting to the default setting for most elements.

Upon further examination, I have observed varying heights for the button and link in Firefox (initially unnoticed in Chrome). This disparity likely stems from discrepancies in both height and box-sizing. Equalizing these attributes across elements should establish uniform dimensions.

It is plausible that the requirement for specifying height in this scenario arises from divergent treatment of fonts between buttons and links in Firefox. In situations where height has not been explicitly defined, font rendering disparities may cause elements to occupy dissimilar amounts of space, despite sharing identical font styles and sizes.

Answer №2

It appears that the form elements such as buttons, select options, and radio buttons are generated by the browser itself. Different browsers and operating systems may display these elements in different ways. It might be necessary to create a custom CSS style specifically for them.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it considered poor practice to modify a Bootstrap class in Bootstrap 4?

For instance: form-control appears like this Would it be considered inappropriate if I incorporate this scss code? .form-control { -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ea ...

Using JavaScript to link buttons and dynamically change their colors

Just starting to dabble in JavaScript and attempting to change the colors of my website's header, footer, and background. I've created two buttons: <div class="styleBut"> <a href="#" class="btn btn-warning">ReStyle</a> ...

Adding the text-success class to a Bootstrap 5 table row with zebra striping does not produce any noticeable change

I am encountering an issue with a Bootstrap 5 table that has the class table-striped. When a user clicks on a row, I have implemented some jQuery code to toggle the class text-success on the row for highlighting/unhighlighting purposes. The highlighting f ...

Tips for containing text inside a div element using HTML with Bootstrap styling

I'm having an issue where my text overflows the page at certain sizes. How can I prevent this from happening? Despite my efforts to find a solution through Google and various attempts, I have been unsuccessful. If you take a look at the screenshot I ...

Unexpected background image slideshow appearance

I am encountering an issue with my slideshow where the last image briefly appears before the first image loads in a continuous loop. The offset of the initial image causes it to start at the middle of the window, and in Google Chrome and Safari, subsequent ...

Is there a way to compile LESS files that include @import statements for other LESS files?

I am currently in the process of converting Twitter Bootstrap's LESS files into the necessary CSS files for Bootstrap to function. I have attempted to use LESS and SimpLESS, but encountered errors with both. According to a discussion on Stack Overflow ...

angularjs identifies the ng-click and href attributes within my event

md-list md-list-item.md-2-line ng-repeat="document in ctrl.documents" div.md-list-item-text ng-click="ctrl.getDocument($event, document)" span ng-bind-html="(document.content | trustedHtml)" Hey there, I've encountered an issue with my md ...

Changing the Color of Tooltips in Bootstrap 4

Currently, I am attempting to customize a Bootstrap 4 tooltip by re-styling it, but the original method no longer seems to be effective. My current approach looks like this: .tooltip-inner { background: #7abcff; background: -webkit-linear-gradien ...

What methods can I use to prevent floated child divs from wrapping?

I'm currently working on creating a carousel-like feature where users can select radio buttons within various div elements. The concept involves having approximately 20 divs, each 150px wide, containing radio buttons. I want to prevent these 20 divs f ...

Utilizing identical ID values multiple times to link to the identical location

I am currently working on a horizontal grid project with 3 image squares. My goal is to create an action where clicking on any grid section will anchor the user down to a slideshow box displayed below the grid. Below is an example of one grid section and ...

Can CSS Grid be substituted for Material UI's grid component?

Exploring the Material-UI Grid Component, I have found that it is built on flexbox and offers great functionality. However, my curiosity lies in comparing it to CSS Grid, which I find equally user-friendly. Despite my preference for CSS Grid, I am hesita ...

Design a custom cover page before printing using the window.print() method

When it comes to printing, I have a header and footer displayed on each page. However, I want the first page to be clean with just a picture or title, without the header and footer that appear on subsequent pages. I've attempted to use CSS like this ...

The content in the html document is not flowing outside a div unless I eliminate the floating property from the div(s)

My goal is to create a page layout with three sections, each floated left based on the device width using media queries in my CSS. I have successfully achieved this, but when I inspect the page using Chrome Developer Tools, I notice that the body is not sp ...

Ways to align grid components at the center in MUI frameworks?

I am brand new to using MUI and currently experimenting with the grid functionality. <Grid className={classes.grid} container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}> {data.data.map((item, index) => { ...

Struggling with getting the local slick slider to run smoothly

After installing the slick slider plugin and trying out some basic examples on jsfiddle, I encountered an issue when running it locally. For some reason, the results I get when testing it on my local environment are different from what I see on jsfiddle. ...

Continue scrolling down until the bottom of the page touches the top

I am currently working on a portfolio project where I want the page to scroll all the way down until the footer image aligns perfectly with the top image. This will create a seamless merging of the header and footer images. Despite searching extensively o ...

The information provided in a PHP form is not saved in a MySQL database

I am trying to create a form using AngularJS to save person details in phpMyAdmin (mysql). However, when I submit the form, the details are not getting added to the database. Can someone please assist me in resolving this issue? Below is the HTML page cod ...

Is it possible to flush the HTML document prematurely using ini_set('zlib.output_compression','ON')?

I am working on optimizing the loading time of my website by flushing the header section early while my PHP script assembles the remaining content and sends it to the browser once complete. It is crucial that the chunks are sent in a compressed format. (My ...

Border dividing vertically of equal length

My goal is to create a table-like appearance in a simple bootstrap grid using the row and col- classes, with vertical dividers that extend the full length of the tallest column. I have created a demo which shows that traditional methods only allow the div ...

Loop through the elements of a class in JavaScript and choose all except for the one that was

Imagine having 5 div elements, each with a similar onclick-function that hides the other divs when clicked. HTML: <div id="1" class="divs" onclick="hide()"></div> <div id="2" class="divs" onclick="hide()"></div> <div id="3" cla ...