How to include image in input value

Question

You will see in the snippet that I have two buttons. One called "Not Included" and the other "Included". The included button is how I want an input type="submit" button to work. I am not sure how to put an image after the value.

Is this possible and how would I do it?

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

cnnr · Accepted Answer · 2018-05-04 13:26:02Z

1

Is it possible for you to use button type='submit' instead of input type='submit'? I slightly changed your snippet below. Yon can use it for normal submit action.

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

answered May 4, 2018 at 13:26

cnnr

1,3074 gold badges18 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

cnnr Over a year ago

@Paul Glad to help you.

Collectives™ on Stack Overflow

How to include image in input value

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related