Question

您好我想知道如何仅显示按钮的阴影并删除文本。我不确定这是否可能。

例如在下面的图片中 enter image description here

我想摆脱图片中的文字。

<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>

这是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;
}

Answer 1

你正在寻找这样的东西吗？：

<强> HTML

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

<强> CSS

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

#buttontext{
    position:relative;
    bottom:-20px;
}

链接到fiddle

Answer 2

好的，如果您使用的是html5按钮：

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

将标记留空，如果使用输入类型按钮，则删除值属性：

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

然后添加以下css：

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

结果是一个带有阴影的空按钮：

Demo

您还可以使用text-indent属性隐藏按钮文本，如：

text-indent: -10000px;

只显示HTML中按钮的阴影？

2 个答案: