CSS : How can I add shadow to a label or box


Tags: css,user-interface,frontend

Problem :

I have an button just as have Ask Question on SO and here is the CSS for it:

.rfs .grey_btn{
   float: right;
   margin: 15px 5px;
}

Now I have to add border shadow to it and I have tried border-radius and box-shadow but it does not give me proper result.

Also other question is that I have a label or box say and now I want to increase size of that box so that I have move the text inside that box to right, currently if I move it to right than it reaches the end limit of box and so I want to increase the size of box so that I can push text more towards right.

Hope I have made my question clear. Any guidance would be highly appreciated.

Thanks.



Solution :

The box-shadow property is not yet widely supported, but can be implemented like:

img {
    -webkit-box-shadow: 5px 5px 10px #666;
    -moz-box-shadow: 5px 5px 10px #666;
    box-shadow: 5px 5px 10px #666;
}

Not sure what you're asking about the label/box?


    CSS Howto..

    How change the radio button hover color

    How to auto adjust parent DIV height according to the contents in child DIV?

    how to create Hollow triangle in css [duplicate]

    how to write a CSS rule that only applies if position:fixed is not supported or Jquery-test for position:fixed?

    How to make an entire div clickable with CSS [closed]

    How do I use a different image for each JQuery UI Slider handle

    How to move the second child in my nav menu with CSS

    How to add a class to select_tag in Ruby on Rails

    How to align logo and text in bootstrap on small screens?

    CSS How to force DIVs side by side with text overflow?

    CSS float property shows no height?

    Span tag is shown as text in Drupal Bootstrap subtheme

    How to position a html element under a fixed div

    How to implement :root { font-size: calc(100vw / 40); } to scale font-size(s)

    how to vertically align this div?

    How can I change my div box to a link?

    With three divs, how to make one float to the right?

    Where do I put my CSS, how do I link to it from the master page?

    How to create a multi colored circle in html and css

    How to do browser detection with jQuery 1.3 with $.browser.msie deprecated?

    CSS block link - how to get it work properly?

    3 column layout, same height, middle column full size. How to do it without “table-cell”

    How to add CSS Hack specifically for IE10?

    Any ideas on how I could implement a grid-view in CSS? - CSS

    How to blur the div below the section with CSS 3 without background image?

    Can someone help explain how the css3 calc() method actually works?

    How to Move Parent Div Position using css on hover

    How can I get IE8 to accept a css :before tag?

    How to edit CSS class via jQuery if statement

    How to place text above an element in HTML/CSS?