Question

我有一个带有SVG图像的按钮。我已经成功添加了div的图片，但是不确定如何将其应用于输入标签。

例如：

.formLink {
  text-align: center;
  display: inline-block;
  margin: 0 0 88px;
  transition: all .25s ease;
  max-width: 100%;
  box-sizing: border-box;
  background: linear-gradient(to right, #e82171, #ef3e36);
  padding: 24px 40px;
  border-radius: 100px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  font-size: 18px;
  color: #fff;
  text-decoration: none;
  font-family: 'GeomanistRegular', sans-serif;
  cursor: pointer;
  font-weight: 900;
  line-height: 1em;
  margin-right: 0;
  margin-left: 0;
  transition: all .6s;
}

i.arrow {
  background: no-repeat;
  background-image: url(https://cdn2.hubspot.net/hubfs/548247/Tomorrow%20People/Landing%20Page/Template%20Build/Arrow.svg);
  padding: 7px;
  margin: 4px 0 4px 10px;
  float: right;
  transition: all 0.2s;
}


/***********/

input {
  text-align: center;
  display: inline-block;
  margin: 28px 0 1em;
  transition: all .25s ease;
  max-width: 100%;
  box-sizing: border-box;
  padding: 24px 1.2em;
  width: 220px;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  font-size: 18px;
  color: #fff;
  text-decoration: none;
  font-family: 'GeomanistRegular', sans-serif;
  cursor: pointer;
  font-weight: 900;
  line-height: 1em;
  background: linear-gradient(to right, #e82171, #ef3e36);
  border: 0;
  transition: all .6s;
  /*background: url(https://cdn2.hubspot.net/hubfs/548247/Tomorrow%20People/Landing%20Page/Template%20Build/Arrow.svg) no-repeat scroll 14px 7px;
    background-size: 20px;*/
}

<div class="formLink">Download now <i class="arrow"></i></div><br>
<input type="submit" value="Send Message" class="hs-button primary large" data-reactid=".hbspt-forms-0.4.1.0">

如您所见，我尝试将background:url添加到输入中，但是它隐藏了我的整个按钮？

我本质上希望“发送消息”按钮看起来像“立即下载”按钮。

想法？ 我无法更改输入的HTML。需要通过CSS来完成

Answer 1

这是一个有效的示例http://jsfiddle.net/xpvt214o/328055/

<div class="formLink">Download now <i class="arrow"></i></div><br>
<button type="submit" value="Send Message" class="hs-button primary large formLink" data-reactid=".hbspt-forms-0.4.1.0"> Send Message<i class="arrow"></i></button>

Answer 2

LinearLayoutManager layoutManager = new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false);

RecyclerView myList = (RecyclerView) findViewById(R.id.my_recycler_view);
myList.setLayoutManager(layoutManager);

.formLink {
  text-align: center;
  display: inline-block;
  margin: 0 0 88px;
  transition: all .25s ease;
  max-width: 100%;
  box-sizing: border-box;
  background: linear-gradient(to right, #e82171, #ef3e36);
  padding: 24px 40px;
  border-radius: 100px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  font-size: 18px;
  color: #fff;
  text-decoration: none;
  font-family: 'GeomanistRegular', sans-serif;
  cursor: pointer;
  font-weight: 900;
  line-height: 1em;
  margin-right: 0;
  margin-left: 0;
  transition: all .6s;
}

i.arrow {
  background: no-repeat;
  background-image: url(https://cdn2.hubspot.net/hubfs/548247/Tomorrow%20People/Landing%20Page/Template%20Build/Arrow.svg);
  padding: 7px;
  margin: 4px 0 4px 10px;
  float: right;
  transition: all 0.2s;
}


/***********/
i.new {
    float: left;
    position: relative;
    background: no-repeat;
    background-image: url(https://cdn2.hubspot.net/hubfs/548247/Tomorrow%20People/Landing%20Page/Template%20Build/Arrow.svg);
    padding: 7px;
    margin: 53px 15px 19px 179px;
    transition: all 0.2s;
   
}

input.hs-button.primary.large.formLink {
    position: absolute;
    text-align: center;
    display: inline-block;
    margin: 25px 0 1em;
    transition: all .25s ease;
    max-width: 100%;
    box-sizing: border-box;
    padding: 24px 40px;
    width: 220px;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    font-size: 18px;
    color: #fff;
    text-decoration: none;
    font-family: 'GeomanistRegular', sans-serif;
    cursor: pointer;
    font-weight: 900;
    line-height: 1em;
    background: linear-gradient(to right, #e82171, #ef3e36);
    border: 0;
    transition: all .6s;
}

将图像添加到输入类型提交

2 个答案: