user3386779 user3386779 - 5 months ago 8
CSS Question

apply background-color only for text

I want to highlight only the text and need to aligh the text in center and need to align the button to float in center.I tried

margin-left:auto;margin-auto;
but not working for input tag



.banner-heading{
background-color: #99408c;
font: 31px roboto thin;
color:#fff;
width:auto;
text-align:center;

}
.banner-content{
background-color: #99408c;
font: 50px roboto thin;
color:#fff; width:auto;

text-align:center;
}

.order {
-moz-box-shadow:inset 0px 1px 0px 0px #ffa200;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffa200;
box-shadow:inset 0px 1px 0px 0px #ffa200;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffa200), color-stop(1, #ffa200));
background:-moz-linear-gradient(top, #ffa200 5%, #ffa200 100%);
background:-webkit-linear-gradient(top, #ffa200 5%, #ffa200 100%);
background:-o-linear-gradient(top, #ffa200 5%, #ffa200 100%);
background:-ms-linear-gradient(top, #ffa200 5%, #ffa200 100%);
background:linear-gradient(to bottom, #ffa200 5%, #ffa200 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa200', endColorstr='#ffa200',GradientType=0);
background-color:#ffa200;
border:1px solid #ffa200;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:30px;
padding:9px 70px;
text-decoration:none;
text-shadow:0px 1px 0px #ffa200;
margin-left:35%;
margin-right:35%;
}
.order:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffa200), color-stop(1, #ffa200));
background:-moz-linear-gradient(top, #ffa200 5%, #ffa200 100%);
background:-webkit-linear-gradient(top, #ffa200 5%, #ffa200 100%);
background:-o-linear-gradient(top, #ffa200 5%, #ffa200 100%);
background:-ms-linear-gradient(top, #ffa200 5%, #ffa200 100%);
background:linear-gradient(to bottom, #ffa200 5%, #ffa200 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa200', endColorstr='#ffa200',GradientType=0);
background-color:#ffa200;
}
.order:active {
position:relative;
top:1px;
}

<div class="row banner">
<div class="col-md-12 col-sm-12 col-xs-12">
<p class="banner-heading">ORDER ONLINE AND ENJOY HOMELY FOOD IN JUST</p>
<P class="banner-content">3 SIMPLE STEPS</P>
<p class="banner-button"> <form method="post">

<input type="submit" name="register" value="LET ME ORDER" class="order">

</form></p>
</div>




Answer

.banner-heading{
	
	font: 31px  roboto thin;
    color:#fff;  
	width:auto;
	text-align:center;
	
}
.banner-content{
	
	font: 50px  roboto thin;
    color:#fff; width:auto;
	
	text-align:center;
}

.order {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffa200;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffa200;
	box-shadow:inset 0px 1px 0px 0px #ffa200;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffa200), color-stop(1, #ffa200));
	background:-moz-linear-gradient(top, #ffa200 5%, #ffa200 100%);
	background:-webkit-linear-gradient(top, #ffa200 5%, #ffa200 100%);
	background:-o-linear-gradient(top, #ffa200 5%, #ffa200 100%);
	background:-ms-linear-gradient(top, #ffa200 5%, #ffa200 100%);
	background:linear-gradient(to bottom, #ffa200 5%, #ffa200 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa200', endColorstr='#ffa200',GradientType=0);
	background-color:#ffa200;
	border:1px solid #ffa200;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:30px;
	padding:9px 70px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffa200;
	margin: 0px auto;
}
.order:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffa200), color-stop(1, #ffa200));
	background:-moz-linear-gradient(top, #ffa200 5%, #ffa200 100%);
	background:-webkit-linear-gradient(top, #ffa200 5%, #ffa200 100%);
	background:-o-linear-gradient(top, #ffa200 5%, #ffa200 100%);
	background:-ms-linear-gradient(top, #ffa200 5%, #ffa200 100%);
	background:linear-gradient(to bottom, #ffa200 5%, #ffa200 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa200', endColorstr='#ffa200',GradientType=0);
	background-color:#ffa200;
}
.order:active {

	top:1px;
}
   
.sbt_btn{
    margin-left:17%;
    width:40%
}
 <div class="row banner">
	     <div class="col-md-12 col-sm-12 col-xs-12">
		    <p class="banner-heading"><span style="background-color: #99408c">ORDER ONLINE AND ENJOY HOMELY FOOD IN JUST</span></p>
			<P class="banner-content"><span style="background-color: #99408c">3 SIMPLE STEPS</span></P>
			<form method="post">
		    <div class="sbt_btn">
		    <input type="submit" name="register" value="LET ME ORDER" class="order">
            </div>
		  
		  </form>
   </div>
</div>