Question

您将在代码段中看到我有两个按钮。一个名为＆＃34; Not Included＆＃34;和其他＆＃34;包括＆＃34;。包含的按钮是我希望input type="submit"按钮工作的方式。我不确定如何在值之后放置图像。

这可能，我该怎么做？

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

Answer 1

您是否可以使用button type='submit'代替input type='submit'？我稍微更改了下面的代码段。 Yon可以将它用于正常的提交动作。

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

如何在输入值

1 个答案: