6
\$\begingroup\$

Just a plain button, in different sizes. I wanted to achieve exactly the same styling cross browser for both anchors, inputs and buttons.

I'm just wondering if this could be improved.

Markup

<!DOCTYPE html>
<html>
    <head>
        <title>CSS button</title>
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
        <a href="#" class="button button-tiny button-primary">Sign up</a>
        <a href="#" class="button button-primary">Sign up</a>
        <a href="#" class="button button-medium button-primary">Sign up</a>
        <a href="#" class="button button-large button-primary">Sign up</a>

        <hr>

        <input type="submit" class="button button-tiny button-primary" value="Sign up">
        <input type="submit" class="button button-primary" value="Sign up">
        <input type="submit" class="button button-medium button-primary" value="Sign up">
        <input type="submit" class="button button-large button-primary" value="Sign up">

        <hr>

        <button class="button button-tiny button-primary">Sign up</button>
        <button class="button button-primary">Sign up</button>
        <button class="button button-medium button-primary">Sign up</button>
        <button class="button button-large button-primary">Sign up</button>
    </body>
</html>

CSS

body,
input,
button {
    font: 14px "Trebuchet MS", sans-serif;
}

input::-moz-focus-inner,
button::-moz-focus-inner { 
    border: 0;
    padding: 0;
}

.button {
    padding:8px 16px;
    display:inline-block;
    text-decoration:none;
    border-radius:3px;
    border:0;
    margin:0;
}

input[type="submit"].button,
button.button {
    cursor:pointer;
    outline:none;
}

.button-tiny {
    font-size:12px;
    padding:6px 14px;
}

.button-medium {
    font-size:16px;
    padding:10px 18px;
}

.button-large {
    font-size:18px;
    padding:12px 20px;
}

.button-primary {
    background:slategrey;
    color:#fff;
}

.button-primary:hover {
    background:lightslategrey;
};
\$\endgroup\$

1 Answer 1

Reset to default
2
\$\begingroup\$

I took the liberty of adding your code to a Fiddle Here so that we could see what it being displayed and test it in different browsers.

I tried to set my Browser to IE 8 and less and apparently it doesn't play nice with JSFiddle. but in IE 9 mode it showed up very nicely, exactly the same as in Chrome.

I like that you created a CSS class button-primary so that you didn't repeat the code you were going to use in all the buttons. and so you didn't have to write so many :hover statements.

Overall I would say that this is some pretty clean code.

But, there is one thing that I would suggest that you do.

Terminate every tag

This

<link rel="stylesheet" href="css/main.css">

Becomes 

<link rel="stylesheet" href="css/main.css" />

Notice the /> at the end. if there is no closing tag you should still "close the tag"

these are called Self closing Tags.

some Tags are self closing tags and some are not. HTML5 is a little blurry on this, or I am a little blurry on HTML5

either way you should make sure that these tags

  1. <img />
  2. <hr />
  3. <br />
  4. <input />
  5. <area />
  6. <link />
  7. <meta />

and some others. This Answers Lists some more

XHTML allows you to Self Close any tag, this isn't really good practice, mostly because most tags are meant to be containers and leaving them empty would be really silly.

This more recent answer from BoltClock explains a little bit better about closing tags.

I recommend always closing your tags, even if the Doctype tells you that you don't have to. it is better practice.

\$\endgroup\$
3
  • \$\begingroup\$ Thanks for this feedback! Regarding the self closing tags, I prefer to not self close but I keep this consistent. As you mentioned, HTML5 is a little blurry on this. I think it's preference, to be honest. \$\endgroup\$
    – Alex Garrett
    Commented Jan 22, 2014 at 16:53
  • \$\begingroup\$ if you ever code for XML or XHTML and you are used to doing this, you will get errors and not know where they came from. it's not a good idea, and shouldn't be your preference, in my opinion \$\endgroup\$
    – Malachi
    Commented Jan 22, 2014 at 17:30
  • \$\begingroup\$ That's true, and a good point. \$\endgroup\$
    – Alex Garrett
    Commented Jan 23, 2014 at 16:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.