Question

我正在尝试使用CSS创建一个按钮。 html代码看起来像

<div class="content">
    <img src="http://cdn4.iconfinder.com/data/icons/socialmediaicons_v120/48/google.png"/ width="20" height="20">
    <span class="fon">Google</span>
</div>

CSS就是

.content {
    width: 120px;
    overflow: hidden;
   color: #f5f5f5;
  background: #2d3f51;
}

.content img {
    margin: 5px;
    float: left;
}

.fon{
  position:relative;top:5px;
}

我正在按预期获得输出，但我想减少重复的html代码并将它们移动到CSS，这样我只需要编写类似于下面代码的代码并且应该显示相同的输出：

<span class="mybutton">Google</span>

这是我的JSFiddle

http://jsfiddle.net/WW4N6/678/

Answer 1

HTML

<p class="mybutton">Google</p>

CSS

.mybutton {
  background: #2d3f51;
  color: #f5f5f5;
  display: flex;
  align-items: center;
  height: 30px;
  width: 100px;
  padding: 0 5px;
}

.mybutton:before {
  content: '';
  background: url('http://cdn4.iconfinder.com/data/icons/socialmediaicons_v120/48/google.png');
  background-size: cover;
  width: 20px;
  height: 20px;
  display: inline-block
}

JSFiddle：http://jsfiddle.net/WW4N6/681/

Answer 2

CSS

.mybutton {
  width: 90px;
  height: 30px;
  overflow: hidden;
  color: #f5f5f5;
  background: #2d3f51;
  background-image: url(http://cdn4.iconfinder.com/data/icons/socialmediaicons_v120/48/google.png);
  background-size: 20px, 20px;
  background-repeat: no-repeat;
  background-position: 5px;
  padding-top: 10px;
  padding-left: 30px;
}

jsFiddle链接 http://jsfiddle.net/joshchurning/9sysby5f/

Answer 3

您可以使用css的background属性作为按钮：

.mybutton {
    ....
    background: url('http://cdn4.iconfinder.com/data/icons/socialmediaicons_v120/48/google.png') no-repeat center center #2d3f51
    ....
}

Answer 4

＆lt; p＆gt;如果你想摆脱HTML代码（img的宽度和长度，我假设），你可以把宽度和高度放在＆lt; code＆gt; .content img＆lt; / code＆gt ; CSS类＆lt; / p＆gt; ＆lt; pre＆gt;＆lt; code＆gt; .content img { 保证金：5px; 向左飘浮; 宽度：20px; 身高：20px; } ＆LT; /代码＆GT;＆LT; /预＆GT;

如何使用CSS获取图像按钮旁边的文本

4 个答案: