html - 如何在输入值中包含图像

Question

您会在代码片段中看到我有两个按钮。一个称为“不包括”，另一个称为“包括”。包含的按钮是我希望 input type="submit" 按钮工作的方式。我不确定如何在值之后放置图像。

这可能吗？我该怎么做？

.bigButtonLink {
	text-decoration: none;
	display: inline-block;
	text-align: center;
	margin: 50px auto;
}
.bigButton {
	border: 1px solid #BE1E2D;
	-webkit-appearance: none;
	border-radius: 2px;
	box-sizing: border-box;
	background: #FFF;
	font-family: 'Muli', sans-serif;
	color: #B82222;	
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	border: 2px solid #B82222;
	font-size: 2.3rem;
	padding: 3rem 6rem 3rem 4.5rem;
}
.rightArrowR {
	width: 30px;
	height: 30px;
	margin-left: 17px;
	transition: all .35s ease;-webkit-transition: all .35s ease;
}
.bigButton:hover .rightArrowR {
	background-size: 15px 15px;
	background-repeat: none;
	transition: all .35s ease;-webkit-transition: all .35s ease;
	transform: translateX(15px);-webkit-transform: translateX(15px);
}

<p>Not Included</p>
<input name="submit" id="quoteSubmit" class="block bigButton" type="submit" value="SEND PROJECT QUOTE">
<p>Included</p>
<a href="#" class="bigButtonLink bigButton">
  Request Quote <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-forward-512.png" class="rightArrowR">
</a>

Answer 1

是否可以使用 button type='submit' 而不是 input type='submit'？我在下面稍微更改了您的代码段。您可以将其用于正常的提交操作。

.bigButtonLink {
	text-decoration: none;
	display: inline-block;
	text-align: center;
	margin: 50px auto;
}
.bigButton {
	border: 1px solid #BE1E2D;
	-webkit-appearance: none;
	border-radius: 2px;
	box-sizing: border-box;
	background: #FFF;
	font-family: 'Muli', sans-serif;
	color: #B82222;	
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	border: 2px solid #B82222;
	font-size: 2.3rem;
	padding: 3rem 6rem 3rem 4.5rem;
}
.rightArrowR {
	width: 30px;
	height: 30px;
	margin-left: 17px;
	transition: all .35s ease;-webkit-transition: all .35s ease;
}
.bigButton:hover .rightArrowR {
	background-size: 15px 15px;
	background-repeat: none;
	transition: all .35s ease;-webkit-transition: all .35s ease;
	transform: translateX(15px);-webkit-transform: translateX(15px);
}

<p>Not Included</p>
<input name="submit" id="quoteSubmit" class="block bigButton" type="submit" value="SEND PROJECT QUOTE">
<p>Included</p>
<button type="submit" class="bigButtonLink bigButton">
  Request Quote <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-forward-512.png" class="rightArrowR">
</button>