Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Web

Unable To Add A Background Colour To The Button In Navigation

Post a Comment
I am still an extreme beginner to web development and i am trying to create this navigation bar. The issue i have come across is that the element i have floated to the right side i

Solution 1:

The solution to your issue is twofold: One, using margins and two, using a background to style your button. The simplest change is as follows:

In your css, change:

.btn-scope1 {
text-transform:uppercase;
padding:10px1px;
margin-right: 30px;
margin-top: 5px;
background: red;
font-weight:600;
 -webkit-border-radius: 3px; 
-moz-border-radius: 3px;
-ms-border-radius: 3px; 
border-radius: 3px;
font-size: 10px;
min-width: 100px;
}

The background will give you the required button background effect. What's important to note is the margin you set. This will enable you to move around the concerned element with respect to the div it is placed in.

Here's a link. (Codepen to show desired result.)

Solution 2:

Congrats on starting web development.

A simple fix for this issue is to give the elements you want to style an ID like <a href="" id="link1">Link Text</a> and then style it with the ID-selector in CSS like #link1 { backgroundcolor: red; }, ideally you should give a class in the HTML selector, like <a href="" class="link">Class</a> and then style it with .link {backgroundcolor: red}.

Solution 3:

Please check again whether this is what you need

ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
  overflow: hidden;
 background-color: #00004d;
 font-size:15px
 }

li {
float: left;
 }

lia {
display: block;
color: white;
text-align: center;
padding: 14px16px;
text-decoration: none;
}

lia:hover:not(.active) {
background-color: #000080;
}

a:active {
text-decoration: none;
color: #00abbd;
outline: none; 
 }
 .btn-scope1 {

 text-transform:uppercase;
 padding:4px15px;
 font-weight:600;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
 -ms-border-radius: 3px;
border-radius: 3px;
 font-size: 12px;
 min-width: 100px;
 }
.btn-scope:hover {
 color: #fff;
 opacity: 0.9;
 background-color: rgba(238, 12, 110, 0.8); }
<html><head><title>WatchIT -Your one stop destination for all your movie tickets</title><linkrel="stylesheet"type="text/css"href="main.css"></head><divid="navbar"class ="navbar-collapse"><ul><li><aclass="active"href=""title="Home">HOME </a></li><li><ahref=""title="movies">MOVIES </a></li><li><ahref=""title="theaters">THEATERS </a></li><li><ahref=""title="tickets">BUY TICKETS ONLINE </a></li><listyle="float:right;padding:15px;"><aclass="btn btn-scope1 navbar-btn"href=""style="background-color:pink !important;">TEST YOUR KNOWLEDGE </a></li></ul></div></body></html>

Solution 4:

That is happening becuase you are providing separate padding values through btn-scope1. Remove that part, et voila!

Here's the css after removing that part.

.btn-scope1 {
    text-transform:uppercase;
    /*padding:4px 15px;*/font-weight:600;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px;
    font-size: 12px;
    min-width: 100px;
}

Post a Comment for "Unable To Add A Background Colour To The Button In Navigation"