user3386779
Reputation: 7215
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>Upvotes: 1
Views: 872
Answers (3)
dulaj sanjaya
Reputation: 1340
.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{
text-align:center;
} <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>Upvotes: 1
Chaitanya
Reputation: 729
Divs have display: block; by default and block elements stretch the whole width of the page. To highlight only text, set display:inline-block; for banner-heading and banner-content.
Now to use margin: auto;, the element should be provided a specific width. So set width for order, banner-heading and banner-content.
Note: width: 100%; won't work because there ain't going to be any space left after that. So always try to give only as much width as necessary.
Upvotes: 1
Jainam
Reputation: 2660
Try below code, i hope this can help for you.
.banner-heading {
background-color: #99408c;
color: #fff;
display: inline;
font: 24px roboto thin;
text-align: center;
width: auto;
}
.banner-content {
background-color: #99408c;
color: #fff;
display: inline;
font: 50px roboto thin;
text-align: center;
width: auto;
}
.row.banner {
text-align: center;
width: 100%;
}
.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>Upvotes: 1
Related Questions
- Background color for text (only)
- Background color to be same as text color
- Background color for a text
- How to change the background color of TEXT in css
- Background-color only on the text field
- Text with background color
- How do I add a background color to a text div without it coloring everything?
- Enforcing background-color to text only
- How to limit the background colour I put on text
- Background color only around text