Button color change on hover CSS - css

The subject exists on Stackoverflow but I don't understand my problem in CSS.
How can I change a button's color on hover?
I have a login button, when I wish to hover the button. One white background should appears.
I get a small background color.
body{
background-image: url("https://zupimages.net/up/20/20/vreu.jpg");
height: 550px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.header-btn-register-login{
margin-top: 220px;
margin-left: 538px;
display: flex;
font-size: 26px;
text-transform: uppercase;
text-align: center;
}
.btn-login {
background:rgba(0,0,0,0);
border: solid 3px;
color: #FFF;
padding: 12px 18px;
}
.btn-login a {
color: #FFF;
text-decoration: none;
}
.btn-login a:hover {
color: black;
background-color: #FFF;
}
<div class="header-btn-register-login">
<div class="btn-login">Login</div>
</div>


Change so that you hoover the button and not the a tag to change the background. And then you should change the color of the a tag. Example css below.
.btn-login:hover {
background-color: #FFF;
}
.btn-login:hover a {
color: black;
}


You should use " .btn-login:hover " instead of ".btn-login a:hover" , this is going to work .


You need to change the background color of .btn-login not .btn-login a
.btn-login:hover {
background-color: #FFF;
}


You are setting the hover on your a tag, that's why your background-color changes when you hover the a. You can change as following:
body{
background-image: url("https://zupimages.net/up/20/20/vreu.jpg");
height: 550px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.header-btn-register-login{
margin-top: 220px;
margin-left: 538px;
display: flex;
font-size: 26px;
text-transform: uppercase;
text-align: center;
}
.btn-login {
background:rgba(0,0,0,0);
border: solid 3px;
color: #FFF;
padding: 12px 18px;
}
.btn-login a {
color: #FFF;
text-decoration: none;
}
/* Here are the modified css */
.btn-login:hover {
color: black;
background-color: #FFF;
}
.btn-login:hover a {
color: #000;
}
<div class="header-btn-register-login">
<div class="btn-login">Login</div>
</div>


You are given the hover effect for a inside the button . Thats why only a is changing the color on hover. Change the line to :
.btn-login:hover {
background-color: #ffffff; ( Your desired color )
}


The problem here is that you're not using a button but an <a> element, so when you change the background for the <a> element only the background of the writing changes. To change the background of the whole 'pseudo' button you need to change the background color of the <div> containing the <a> element while changing also the <a> element.
Your code modified accordingly to what said above:
body{
background-image: url("https://zupimages.net/up/20/20/vreu.jpg");
height: 550px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.header-btn-register-login{
margin-top: 220px;
margin-left: 538px;
display: flex;
font-size: 26px;
text-transform: uppercase;
text-align: center;
}
.btn-login {
background:rgba(0,0,0,0);
border: solid 3px;
color: #FFF;
padding: 12px 18px;
}
.btn-login a {
color: #FFF;
text-decoration: none;
}
.btn-login:hover{
color: black;
background-color: #FFF;
}
.btn-login:hover a{
color: black;
}
<div class="header-btn-register-login">
<div class="btn-login">Login</div>
</div>

Related

I can't put a box inside a box plus color not changing

On the main page of my site there are 4 hyperlinks that I want to appear on every page in the same way. Except I want the link of the page I'm on to be the same color as when I put my mouse on it.
I thought I could get that with this code:
.navigation {
padding: 40px 0px;
position: relative;
text-align: center;
width: 100%;
font-size: 30px;
}
.navigation a {
background: black;
border: 1px solid grey;
border-radius: 7px;
color: white;
display: inline-block;
margin: 100px 35px;
padding: 14px;
text-decoration: none;
opacity: 0.75;
font-family: impact;
}
.navigation a:hover {
background: white;
border: 1px solid black;
color: black;
}
#contact {
background: white !important;
color: black !important;
}
<div class="navigation">
Mes productions
DJ
<a target="_blank" href="./CV.pdf">Mon CV</a>
<div id="contact">
Me contacter
</div>
</div>
Problem is that it keeps the black background color with white font color and it goes under the other links and not inline with them.

But I think that it's a bad practice to place the link in the "div" in this situation. You can simply register a class for the link and compose styles for this class.
.navigation {
padding: 40px 0px;
position: relative;
text-align: center;
width: 100%;
font-size: 30px;
}
.navigation a {
background: black;
border: 1px solid grey;
border-radius: 7px;
color: white;
display: inline-block;
margin: 100px 35px;
padding: 14px;
text-decoration: none;
opacity: 0.75;
font-family: impact;
}
.navigation a:hover {
background: white;
border: 1px solid black;
color: black;
}
#contact a {
background: white !important;
color: black !important;
}
<div class="navigation">
Mes productions
DJ
<a target="_blank" href="./CV.pdf">Mon CV</a>
<div id="contact">
Me contacter
</div>
</div>

link not inline because in it's own div?

The links were all horizontally aligned until i put one of them in it's own div to change it's color when i'm on the page it is linking to.
Now i can't get him to go back in line.
<div class="navigation">
Mes productions
DJ
<a target="_blank" href="./CV.pdf">Mon CV</a>
<div id="contact">
Me contacter
</div>
</div>
.navigation {
padding: 40px 0px;
position: relative;
text-align: center;
width: 100%;
font-size: 30px;
}
.navigation a {
background: black;
border: 1px solid grey;
border-radius: 7px;
color: white;
display: inline-block;
margin: 100px 35px;
padding: 14px;
text-decoration: none;
opacity: 0.75;
font-family: impact;
}
.navigation a:hover {
background: white;
border: 1px solid black;
color: black;
}
#contact a {
background: white !important;
color: black !important;
display: inline-block !important;
}

You need to set display: inline-block on #contact, not #contact a.

Using Border-bottom to Place A Hover/Active Link at the Bottom of the Menu Item

How do I add an underline for an active or hovered link, where the underline shows up at the bottom of the menu bar it's a part of? With the code I currently I have (see below) the underline is showing up directly UNDERNEATH the menu bar, rather than showing up at the bottom of the menu bar. I tried using negative padding/margin, but that didn't work. Right now I have this:
.horiz-tab, .horiz-tab-active {
background: #actionBar;
float: left;
font-size: 1.2rem;
padding: 1.5rem 1.125rem;
position: relative;
}
a.horiz-tab:link, a.horiz-tab:visited {
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
a.horiz-tab:hover {
color: #fff;
text-decoration: none;
border-bottom: #4c7296 6px solid;
overflow: none;
bottom: 0px;
}
.tab-count {
background-color: #689dcd;
border-radius: 15px;
color: #fff;
font-size: .9rem;
margin-left: 0.35rem;
padding: 2px 6px;
}
The HTML looks like this:
<div *ngFor="let record of records; let i = index;">
<a routerLink="/organization" routerLinkActive="horiz-tab-active" class="horiz-tab">{{record._id.sub}}<span class="tab-count">{{record.count}}</span></a>
</div>

The OP has .main as a class in CSS yet there is none in HTML
.horiz-menu {
color: #fff;
background: #000;
height: 34px;
padding:6px 0 0 3px;
}
a.horiz-menu-tab:hover {
color: #fff;
background: #000;
display: block;
text-decoration: none;
border-bottom: 6px solid #fb4;
height:28px;
margin:0;
}
<div class="horiz-menu" *ngFor="let record of records">
<a routerLink="/" routerLinkActive="horiz-menu-active" class="horiz-menu-tab">{{info}}</a>
</div>

How to make gradual colour change when hover with CSS?

I'm trying to make a gradual background colour change from normal to a hover colour, but, unfortunately, everything I've read and tried didn't work. This is the code I have:
.button-submit {
color: #ffffff;
cursor: pointer;
display: inline-block;
line-height: 35px;
background: #5ea12b;
padding: 0px 20px;
vertical-align: middle;
font-size: 18px;
min-width: 80px;
min-height: 35px;
font-family: Light;
border: 1px solid transparent;
margin: 5px;
}
.button-submit:hover {
background: #5ea12b;
color: #FFFFFF;
}

Use transition property:
EG:
.button-submit {
background: #5ea12b;
transition: background 0.5s ease-in-out;
}
And on hover, change the background color to little darker tone.
.button-submit:hover {
background: #000;
}
CHECK THE DEMO

Text transparent issue with background color

i'm making a button and I want to achieve an insteresting effect that you can see here.
The problem is that when on hover I put to the text rgba(0,0,0,0.0); all the button turns white, even the text.
Here's my code so far:
.button{
height: 40px;
border-radius: 5px;
border: 2px solid #fff;
text-align: center;
font-size: 16px;
color: #fff;
line-height: 2.4em;
cursor: pointer;
}
.button:hover{
background: #fff;
color: rgba(0,0,0,0.0)
}

The reason is because your hover color: was set to transparent, so of course it will be white. Try something simpler like below:
.button {
color: blue;
background: white;
padding: 5px 10px;
border: 3px solid blue;
border-radius: 5px;
text-decoration: none;
transition: all 0.3s;
}
.button:hover {
color: white;
background: blue;
}
button

The problem is that, you have set the text color opacity to 0 so it is like your text is completely transparent. You can simply match it to your body's background color like I did below. No need to mention the opacity, it is 1 by default.
Fixed and working code snippet:
body{
background: #0E80C6;
}
.button{
height: 40px;
border-radius: 5px;
border: 2px solid #fff;
text-align: center;
font-size: 16px;
color: #fff;
line-height: 2.4em;
cursor: pointer;
background: transparent; /* background changed to transparent so it shows the body's background color */
}
.button:hover{
background: #fff;
color: #0E80C6; /* color matched to that of the background */
}
<button class="button">Button</button>

Your issue was you had the opacity of the text color set to 0%. The last letter in rgba means "alpha" or opacity.
body {
background-color: rgba(42, 148, 245, 1.00);
}
.button {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: transparent;
height: 40px;
border-radius: 5px;
border: 2px solid #fff;
text-align: center;
font-size: 16px;
color: #fff;
line-height: 2.4em;
padding-left: 40px;
padding-right: 40px;
cursor: pointer;
}
.button:hover {
background: #fff;
color: rgba(42, 148, 245, 1.00);/*Set this to whatever you have for the background color. the "1.00" is the opacity"*/
}
<input type="button" value="button" class="button">

RGBA(red, green, blue, alpha)
The problem is you had the opacity(alpha value) of text is 0
body{
background: blue
}
.button{
background: transparent;
height: 40px;
border-radius: 5px;
border: 2px solid #fff;
text-align: center;
font-size: 16px;
color: #fff;
line-height: 2.4em;
cursor: pointer;
}
.button:hover{
background: #fff;
color: blue
}
<button class="button">Button</button>

Resources