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 Draw a Multi-Coloured Line?

    How do I replace color: windowtext;

    How to make div fill the rest of viewport with keeping of aspect ratio (CSS or jQuery)?

    How to check if css box-shadow is supported (jQuery)?

    How can change the style of
      tag in CSS

    how to apply multiple css image filters using jquery

    How to have different table styles in CSS

    CSS - EM Values Inconsistent, How To Debug / Explanation

    How to make an item background visible on overflow?

    How to style a list within a menu?

    How can i have a background image and lighting that are crossed with lines drawn on it in CSS [closed]

    how to center a box using blueprint css framework

    Get the Navbar to show when hovering over header image

    How to remove extra space under paragraph in HTML/CSS

    How to create slideshow in css without having to make more than one class?

    How to apply style to Nth instance of class, and find by indirect inheritance - CSS Jquery

    How to apply CSS to a Mac Chrome Select Box?

    How to make a div 100% width minus a certain amount?

    How to show current page using CSS? .current_link not working

    div not showing above text box

    How to make header in css but im using opacity?

    Rails4: How to create Image Links with Hover?

    How to use a variable for image paths with less mixins

    Knockout - How to bind outer container css from set of checkboxes?

    How can I center vertically a div with position absolute and hight = 100px on another div with position relative but with not standard height

    How to pass to next line that cutted elements in a list?

    Getting a resolution error on Chrome and Firefox for C9 app. Not sure how to resolve

    How do I adjust position of a text inside a Bootstrap panel with overriden max-height?

    How to make a circle breadcrumb with only css

    How to get list of Css class use in the HTML file?