0

現在リンクがあり、それをボタンの外観として使用しています。アイコンを追加したいと思います。

+例: Add User という単語の横にあるプラス記号のアイコン。これが私のリンクです：

<a class="glossyBtn" href='<%:Url.Action("Edit", "Case", new{caseId = Model}) %>'>Cancel</a>

これが私の.glossyBtnスタイルです：

.glossyBtn
{
    display: inline-block;
    background-color: #c1e2f4;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #cccccc));
    background-image: -webkit-linear-gradient(top, #eeeeee, #b1daf1);
    background-image: -moz-linear-gradient(top, #eeeeee, #b1daf1);
    background-image: -ms-linear-gradient(top, #eeeeee, #b1daf1);
    background-image: -o-linear-gradient(top, #eeeeee, #b1daf1);
    background-image: linear-gradient(top, #eeeeee, #b1daf1);
    border: 1px solid #3e95c8;
    border-bottom: 1px solid #3e95c8 !Important;
    border-radius: 3px;
    color: #046fad !Important;
    font: bold 12px Helvetica Neue, Helvetica, Arial, sans-serif;
    padding: 5px 12px;
    text-align: center;
    text-shadow: 0 1px 0 #eee;
    text-decoration: none;
    cursor: pointer;
    list-style: none;
    float: left;
    margin-top: 5px;
    margin-right: 5px;
}

ライブデモ:ティンカービン

4

2 に答える 2

1

私はこれをテストしていませんが、以下は適切な配置で動作するはずです:

<a class="glossyBtn" href='<%:Url.Action("Edit", "Case", new{caseId = Model}) %>'><span><img src="plus.png" alt=""></span>Cancel</a>

<span>テキストの前にを含む を付けることで<img>、画像が右側のテキストとインラインになるようにすることができます。

于 2012-08-15T20:16:09.560 に答える
1

:after疑似セレクターを使用します。

.glossyBtn:after {
    content: '+'; 
    padding-left: 5px;
}

ライブデモ:ティンカービン

テキストの前にプラス文字を追加する場合は、:before疑似セレクターを使用します。

.glossyBtn:before {
    content: '+'; 
    padding-right: 5px;
}

ライブデモ:ティンカービン

テキストとプラス文字の間にスペースを空けるために、左右にパディングを追加しました。

于 2012-08-15T20:16:28.557 に答える