Question

我尝试将按钮设为css图标而不是图像，这是我的css按钮：

按钮：

<div>
     <b>
         <asp:Button ID="bt_VaildID" runat="server" Text="Valider" OnClick="bt_VaildID_Click" ValidationGroup="auGoup" CausesValidation="true" CssClass="bt_Valider" />
    </b>
</div>

CSS：

.bt_Valider {
display: inline-block;
border: 2px solid #903E71;
color: #000000;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
font-family: Verdana;
width: auto;
height: auto;
font-size: 16px;
padding: 6px 25px;
background-image: linear-gradient(to top, #903E71, #903E71);
background-image: -webkit-linear-gradient(to top, #903E71, #903E71); /* for safari */
background-color: #903E71;
float:right;
}

.bt_Valider:hover, .bt_Valider:after {
    border: 2px solid #903E71;
    color: #903E71;
    background-image: linear-gradient(to top, #FFF, #FFF);
    background-image: -webkit-linear-gradient(to top, #FFF, #FFF); /* for safari */
    cursor:pointer;
    content: "\279C"; /* I found that with this i can make some icon */
}

此代码为我提供了以下结果：Output image

但我希望这样：Desired

Answer 1

不确定这是否是您想要的结果。

请注意，content: "\279C";使用的是unicode字符，请点击此处http://tutorialzine.com/2014/12/you-dont-need-icons-here-are-100-unicode-symbols-that-you-can-use/

＆＃13;

.bt_Valider {
display: inline-block;
border: 2px solid #903E71;
color: #000000;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
font-family: Verdana;
width: auto;
height: auto;
font-size: 16px;
padding: 6px 25px;
background-image: linear-gradient(to top, #903E71, #903E71);
background-image: -webkit-linear-gradient(to top, #903E71, #903E71); /* for safari */
background-color: #903E71;
/* float:right; */
}

.bt_Valider:hover, .bt_Valider:after {
    /* border: 2px solid #903E71; */
    color: #000000;
    cursor:pointer; background:transparent;
    content: "\279C"; /* I found that with this i can make some icon */
}

＆＃13;

<div>
     <b>
     <Button ID="bt_VaildID" runat="server" Text="Valider" OnClick="bt_VaildID_Click" ValidationGroup="auGoup" CausesValidation="true" Class="bt_Valider" >Valider</Button>
    </b>
</div>

＆＃13;

为什么我无法获得带有Icon而没有图片的CSS按钮？

1 个答案: