Kevin Powell - CommunityKP-C
Kevin Powell - Community•8mo ago•
7 replies
Amodeus R.

What are good css normalize/resets for a button?

I wanted to add some button normalization styles, but I was wondering what is considered good practice or not. I found around 3 options, the first being very simple and direct is all: unset, but I vaguely remember Kevin saying it's not really good to use that because It can remove some good/relevant styles and I'm not sure it's the case here.

The other ons ie the one below:
button, input[type="submit"], input[type="reset"] {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
        margin: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}


something in-between simple and thorough. But I found another one more extensive:

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    font-weight: inherit; /* 1 */
    line-height: inherit; /* 1 */
    color: inherit; /* 1 */
    margin: 0; /* 2 */
    padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
    text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button; /* 1 */
    background-color: transparent; /* 2 */
    background-image: none; /* 2 */
}


Which one you guys thing is the best one to use? Or if there's a 4ª option, I'm all ears.
Was this page helpful?