Styling an anchor tag to look like a submit button

by

The best you can get with simple styles would be something like:

.likeabutton {
    text-decoration: none; font: menu;
    display: inline-block; padding: 2px 8px;
    background: ButtonFace; color: ButtonText;
    border-style: solid; border-width: 2px;
    border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
}
.likeabutton:active {
    border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
}

(Possibly with some kind of fix to stop IE6-IE7 treating focused buttons as being ‘active’.)

This won’t necessarily look exactly like the buttons on the native desktop, though; indeed, for many desktop themes it won’t be possible to reproduce the look of a button in simple CSS.

However, you can ask the browser to use native rendering, which is best of all:

.likeabutton {
    appearance: button;
    -moz-appearance: button;
    -webkit-appearance: button;
    text-decoration: none; font: menu; color: ButtonText;
    display: inline-block; padding: 2px 8px;
}

Unfortunately, as you may have guessed from the browser-specific prefixes, this is a CSS3 feature that isn’t suppoorted everywhere yet. In particular IE and Opera will ignore it. But if you include the other styles as backup, the browsers that do support appearance drop that property, preferring the explicit backgrounds and borders!

What you might do is use the appearance styles as above by default, and do JavaScript fixups as necessary, eg.:

<script type="text/javascript">
    var r= document.documentElement;
    if (!('appearance' in r || 'MozAppearance' in r || 'WebkitAppearance' in r)) {
        // add styles for background and border colours
        if (/* IE6 or IE7 */)
            // add mousedown, mouseup handlers to push the button in, if you can be bothered
        else
            // add styles for 'active' button
    }
</script>

More Related Contents:

  1. Text in my heading should be top not bottom [closed]
  2. CSS indentation not working [closed]
  3. How do you keep parents of floated elements from collapsing? [duplicate]
  4. Why do browsers match CSS selectors from right to left?
  5. How to remove margin space around body or clear default css styles
  6. What to use in place of ::ng-deep
  7. CSS Grid Layout not working in IE11 even with prefixes
  8. How to deal with page breaks when printing a large HTML table
  9. How do I change the color of radio buttons?
  10. How can I draw vertical text with CSS cross-browser?
  11. Is clearfix deprecated?
  12. CSS-Only Scrollable Table with fixed headers [duplicate]
  13. How to style SVG with external CSS?
  14. Pure CSS multi-level drop-down menu
  15. How to remove the gutter (spacing) between columns in Bootstrap?
  16. How to make an HTML anchor tag (or link) look like a button?
  17. Make link in table cell fill the entire row height
  18. Why is text wrapping around a floating element instead of going belows like another div?
  19. CSS only solution to set MULTIPLE “same height” row sections on a responsive grid
  20. Rounded corners in outlook without images
  21. Same height column bootstrap 3 row responsive
  22. Skewed Borders on a Div
  23. Flexbox with fixed header and footer and scrollable content
  24. Prevent a centered layout from shifting its position when scrollbar appears
  25. word-wrap break-word does not work in this example
  26. centering a div between one that’s floated right and one that’s floated left
  27. How to select classes with spaces
  28. How to place Text and an Image next to each other in HTML?
  29. How to make input autofocus in internet explorer?
  30. Image center align vertically and horizontally [duplicate]

Leave a Comment