Question

我正在尝试实现以下目标：我正在使用bootstrap，标准的btn类。

到目前为止，我的背景图像处于正确的位置，但它被切断了。我试过overflow: visible;等等......

.btn {
  background: url('../images/button.svg') no-repeat;
  background-repeat: no-repeat;
  background-position: left;
  padding-left: 80px;
}


<button class="btn btn-default btn-lg">GET A FREE QUOTE <i class="fa fa-chevron-right" aria-hidden="true"></i></button>

感谢您的帮助

Answer 1

您好，您可以使用下面的代码，我已将您的png文件上传到mediafire。我还删除了你的图像背景。这是链接：http://www.mediafire.com/view/ddv9ce54d08488m/Ky5ME_burned.png

＆＃13;

<!DOCTYPE html>
<html>
<head>

<a href="http://google.com">
<input type="image" src="Ky5ME_burned.png" alt="Submit" width="660" height="174">
</a>


</head>
</html>

＆＃13;

Answer 2

.btn_button, .btn_button:hover, .btn_button:focus{
  background: orange;
  color: blue;
  margin-left: -10px;
  margin-top: 3px;
  width: 150px;
  outline: none;
}
.round_div{
  display: flex;
}
.round2:before{
    content: "\25cf";
    font-size: 14px;
    padding: 0px 3px;
    border: 4px solid #000;
    border-radius: 50%;
}
.round1{
    border: 10px solid orange;
    border-radius: 50%;
}
.glyphicon_right_arrow{
    color: #fff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div class="col-xs-12 form-group"></div>
<div class="col-xs-12">
<div class="round_div">
<div class="">
<div class="round">
<div class="round1">
<span class="round2"></span>
</div>
</div>
</div>
<div class="">
  <button class="btn btn_button" value="">MORE ABOUT US
<span class="glyphicon glyphicon-chevron-right glyphicon_right_arrow"></span></button>
</div>
</div>
</div>

具有溢出SVG背景的HTML按钮

2 个答案: