Display only the shadow to a button in HTML?


Hi I wanted to know how to show only the shadow to a button and remove the text. I am not sure if this is possible.

For example in the pic below enter image description here

I want to get rid on the text in the picture.

<button id="button-switch-1" class="device_cls control-metal-button modal-button cmb-tl cmb-plug modal-button-disabled" device_name="12.1" device_type="Light" device_id="1" state="on_bnt" board_id="12" room_type="Livingroom" room_id="1" control_call="roomcontrol">12.1</button>

and here is the css

.modal-button {
    box-shadow: 5px 5px 9px rgba(0, 0, 0, 0.55), 0 0 6px rgba(0, 179, 254, 0.77);
    background: url(../images/icon_bulb_on.png) 26px 20px no-repeat, url(../images/metal_btn.png) no-repeat;
    background-size: 31px 49px, contain;
    width: 86px;
    height: 86px;
    margin: 0;
    position: absolute;
    text-shadow:0px 50px 0px #e1e2ed;
Problem courtesy of: timberlake


Are you looking for something like this? :


    <button type="button"><span id="buttontext">Click Me!</span></button>


  box-shadow: 5px 5px 5px #888888;
  background: transparent;
  border: none; 


Link to fiddle

Solution courtesy of: qbit


Ok if you are useing the html5 button:

<button class="shadow"></button>

leave the tag empty and if you are using the input type button then remove the value attribute:

<input class="shadow" type="button" />

then add the following css:

.shadow {
    border: 0;
    background: transparent;
    width: 30px;
    height: 15px;
    box-shadow: 1px 1px 1px #888888;

the result is an empty button with some shadow added:


you also can hide button text with the text-indent property like:

text-indent: -10000px;
Discussion courtesy of: Steven Web

This recipe can be found in it's original form on Stack Over Flow.