How would you code this: The SO highlighted button outline effect [closed]


Tags: javascript,css

Problem :

I'm a person that learns best from example. Currently, I'm diving into the field of Web Development after fifteen years of developing desktop apps. I'm still getting used to all the web technologies used for developing modern web sites and everywhere I look, I see cool little UI elements and have no idea how they're implemented. So I thought I'd ask you, the web experts...the wexperts :)

What are some straight forward or creative ways you could code the SO highlighted button outline effect (shown below)...

The SO Highlighted button outline effect

Feel free to give example code or high level explanations that include the various technologies involved (HTML, CSS, Javascript, etc.).

  • How would CSS play a role in this?
  • Could you use JQuery to implement this easily? GWT?

Thanks so much in advance for all your help!



Solution :

If you are talking about how the tabs change when you hover the mouse over them, that is done entirely with CSS. Using the :hover pseudo-class, the site sets the background to white, and changes the border colours to black on the top three sides, and white on the bottom.

How do I know this? The Firebug Firefox plugin. It allows you to easily inspect the DOM, debug javascript, and look at CSS styles for various page elements. If you learn best by example, Firebug will help a lot.

Specifically, the "#tabs a" elements (anchors that are descendants of an element with ID "tabs"), has the following relevant styles:

#tabs a:hover {
    background:#FFFFFF none repeat scroll 0 0;
    border-color:#777777 #777777 #FFFFFF;
    border-style:solid;
    border-width:1px;
}

#tabs a {
    background:#EEEEEE none repeat scroll 0 0;
    border:1px solid #EEEEEE;
}

(I may be missing some of the changes that actually matter, but those are the basics.


    CSS Howto..

    CSS how to keep text always inline with a paragraph

    How to stylize left part of input range in Metro Apps?

    When I try to print a page I created using jQuery Mobile, it always prints an extra blank page. How can I stop this?

    How can I create the shape of side mirrors of a truck/lorry?

    How do you use nth-child(odd) on table rows but you want some rows to be exempted from the css rule?

    How to hide Fileupload with simple span by using css

    How to draw a specific shape in CSS? [closed]

    StackLayoutPanel Shows white ends at the rounded corners

    How to make input placeholder text not opaque when the text field background is opaque

    How to use calc in CSS for mozilla firefox without position absolute

    How to change CSS where id=array(index)?

    How can I organize my css rules?

    Jquery - 100% width slideshow whilst keeping the height propotional

    how to get fixed header with css?

    How do I set the height of an iframe with the min-height property in the body?

    How to apply a drop shadow on a triangle in CSS?

    How to override css attribute-only style

    How to double an image size in HTML using only CSS?

    How to remove some css properties without the paticular one using regular expression?

    How to remove the double border bottom line below the breadcrumb

    how to change CSS styles dynamically using php/Mysql..i want to create themes that are unique to each user?

    How do I install and use Groundwork CSS

    How to scale image with with transition CSS? [closed]

    How to achieve cellpadding with divs or likeiwse?

    How to pivot image with CSS and Javascript

    How to expand toggle sidebar more

    how to add border to image css on blogger

    JavaScript and SEO. How Should I reconcile them?

    How to move an entire group of objects with Javascript

    How to Remove CSS line-through