1

このようなボタンを作りたい [ icon.png text-here ]

ボタンにアイコンとテキストがあるようにします。

これまでの私のコード:

[CSS]

.icon {
    background: url('icon.png');
    float: right;
    width: 40px;
    height: 40px;
}

[html]

<input type="submit" id="submit" class="icon" value="Log Me In"/><input type="button" id="cls" value="Clear All"/>

私が間違っていることを教えてください。助けていただければ幸いです。

4

2 に答える 2

0

アイコンに配置を追加し、ボタンの残りの部分をスタイルする CSS を追加するだけです。

HTML

<input type="submit" id="submit" class="icon" value="Log Me In"/>

CSS

input{
                 /* Change `http://placehold.it/50x50` to your icon */
    background:green url("http://placehold.it/50x50") 10px center no-repeat;
    height: 75px;
    padding: 10px 10px 10px 70px;
}

http://jsfiddle.net/daCrosby/tvNCa/1/

于 2013-07-07T04:04:51.550 に答える
-1

これが一番楽な方法だと思います

<button type="submit">some text <i class="icon"></i></button>


.icon {
  display: inline-block;
  background: url("http://placehold.it/16x16&text=icon");
  width: 16px;
  height: 16px; 
}

ここに例を示します: http://jsfiddle.net/dXdF2/1/

于 2013-07-07T03:59:51.727 に答える