I have a button with a link within it. I want the button's background color and the link's text color to change when I hover over the button. However, I can't get the link's color to change when I hover over the button, only when I hover over the link. Here's what I have.
button {
background-color: navy;
padding: 1%;
font-size: 16px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
border: 4px inset darkgrey;
}
button a {
color: white;
text-decoration: none;
font-weight: bold;
}
button a:hover {
color: navy;
}
button:hover {
background-color: white;
}
<button>Lorem ipsum</button>
Thanks!
It was not very complicated, like gift!
button {
background-color: navy;
padding: 1%;
font-size: 16px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
border: 4px inset darkgrey;
}
button a {
color: white;
text-decoration: none;
font-weight: bold;
}
button:hover {
background-color: white;
}
button:hover a {
color: navy;
}
<button>Lorem ipsum</button>
Someone answered this and deleted it, but it worked:
button:hover a {
color: navy;
}
As said by other users, you shouldn't place a link inside a button. If you need the button to open another page you could place the button inside a form and specify the destination on the action, like this:
<form action="random.html">
<button>Lorem ipsum</button>
</form>
Related
When I hover over the button, it stops displaying "Middle School" and instead just becomes a white bar. How do I fix this without using
.buttonM {
width: 100%;
/* set a width so it doesnt change upon hover */
border: 1px solid #fff;
background: #de5426;
padding: 3px 21px;
color: #ffffff;
font-size: x-large;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
vertical-align: middle;
letter-spacing: 1px;
font-weight: bolder;
font-family: "montserrat";
}
.buttonM:hover span {
display: none
}
.buttonM:hover {
background-color: #fff;
color: #de5426;
cursor: pointer;
}
.buttonM:hover:before {
content: "Middle School";
}
<button class="buttonM">
<span>Middle School</span>
</button>
I understand you confusion. I was this confused when I started too.
anyway, you don't need to add span in a button unless you have a purpose for that.
the problem happens because you added hover to the span and to the button. so my advice is to minimize your code as much as possible. you also added two font family for the button. don't do that. also don't add cursor: pointer in the hover. you should put it in the button style, not its hover.
here is a working button from your code and I hope it's what you need.
.buttonM {
width: 100px;
height: fit-content;
background: #de5426;
color: #fff;
font-size: x-large;
font-family: Arial, Helvetica, sans-serif;
cursor: pointer;
}
.buttonM:hover {
background-color: #fff;
color: #de5426;
}
<button class="buttonM">
<span>Middle School</span>
</button>
I've been trying to change the color of my text (Normal and Hover) but nothing seems to work. Tried !important but still not showing. Have tried looking at other answers but didn't work.
CSS & HTML Div Code (I have tried removing text-decoration none)
#five {
position : fixed;
top : 10px;
right : 100px;
font-family : monospace;
font-weight : bold;
font-size : 16px;
color : red!;
}
#five:hover {
color : black;
text-shadow : 5px 5px 5px red;
}
<p id="five">
<a href="UNKNOWN" target="_target" style="text-decoration: none;">
TEST5
</a>
</p>
You need to style the a tag, not the parent.
#five a {
text-decoration: none;
color: red;
}
#five:hover a {
color: black;
}
This happens because the <a> tag applies its own color by default (which is a benefit in most cases, but in your case you have to manually change the color directly by using the a selector).
Complete, fixed code:
#five {
position: fixed;
top: 10px;
right: 100px;
font-family: monospace;
font-weight: bold;
font-size: 16px;
}
#five:hover {
text-shadow: 5px 5px 5px red;
}
/* this what I added */
#five a {
text-decoration: none;
color: red;
}
#five:hover a {
color: black;
}
<p id="five">
TEST
</p>
Hi it's because you need to colour the a tag so you could add a class or id to the a tag and then change that.
Change the css to this:
.five {
position: fixed;
top: 10px;
right: 100px;
font-family: monospace;
font-weight: bold;
font-size: 16px;
color: red!;
}
.five:hover {
color: black;
text-shadow: 5px 5px 5px red;
}
And change the html to this:
<p id="five"><a class="five" href="UNKNOWN" target="_target" style="text-decoration: none;">TEST5</a></p>
I have a submit button. Initial background color is X. When I hover on the button, background color changes to Y. All fine. But when I click the button, background color changes back to X. I want it to keep color of Y. How can I do it?
#submitStarted {
border: solid 0px;
border-radius: 30px;
color: white;
background-color: #D94C27;
font-family: "Open Sans", Arial;
padding: 14px 30px;
font-weight: 450;
font-size: 15px;
}
#submitStarted:hover {
cursor: pointer;
background-color: #C92A00;
}
<input id="submitStarted" type="submit" value="Get Started">
It's called focus state, you also need to add #submitStarted:focus with #submitStarted:hover to keep same color as hover, but it will be removed after you click out side the button.
#submitStarted {
border: solid 0px;
border-radius: 30px;
color: white;
background-color: #D94C27;
font-family: "Open Sans", Arial;
padding: 14px 30px;
font-weight: 450;
font-size: 15px;
}
#submitStarted:hover,
#submitStarted:focus,
#submitStarted.active {
cursor: pointer;
background-color: #C92A00;
}
<input
id="submitStarted"
type="submit"
value="Get Started"
onclick="this.classList.add('active')">
If you want it to stay the same even after removing focus, you need to play with classes and some JS
onclick="this.classList.add('active')"
I want to remove blank spaces between the buttons, so that when I for example hover over the NORMAL button, there will be no blank space between it and the HARD button. How can I do that and where do these blank spaces come from?
body {
margin: 0;
}
#stripe {
background-color: white;
text-align: center;
height: 50px;
color: black;
}
button {
border: none;
background: none;
text-transform: uppercase;
height: 100%;
font-weight: 700;
color: black;
letter-spacing: 1px;
font-size: inherit;
transition: all 0.3s;
outline: none;
}
button:hover {
color: white;
background: black;
}
.selected {
color: white;
background: black;
}
<div id="stripe">
<button class="mode">Easy</button>
<button class="mode">Normal</button>
<button class="mode selected">Hard</button>
</div>
Browsers always add spaces between some elements, including buttons. To remove these, you need to set font-size to zero for their parent container. Then, to restore text size inside buttons, set font-size for them.
#stripe {
font-size: 0;
}
button {
font-size: 14px; // Set font size that you need here
}
Either remove the spaces and carriage returns, or put an HTML comment between them.
body {
margin: 0;
}
#stripe {
background-color: white;
text-align: center;
height: 50px;
color: black;
}
button {
border: none;
background: none;
text-transform: uppercase;
height: 100%;
font-weight: 700;
color: black;
letter-spacing: 1px;
font-size: inherit;
transition: all 0.3s;
outline: none;
}
button:hover {
color: white;
background: black;
}
.selected {
color: white;
background: black;
}
<div id="stripe">
<button class="mode">Easy</button><!--
--><button class="mode">Normal</button><!--
--><button class="mode selected">Hard</button>
</div>
Add display: flex; to the parent container
If using bootstrap, can group buttons together by wrapping in div with class="btn-group".
Example for v3.3.7: https://getbootstrap.com/docs/3.3/components/#btn-groups-single
Visually might or might not be what you want. Has rounded corners on left and right ends and straight line between buttons. Can probably restyle.
I am trying to get a link to be half one color and half another color, then switch upon hover. So: (white)Hello (Blue)Everyone! -> (Blue)Hello (White)Everyone!
I think I may have dumbed down the code too much... this is a better example.
How do I get it to where "EVERYONE!" does not have a box around it?
HTML:
<div class="home-logo-text">
<a href="#">
HELLO
<span class="home-logo-text-roads">
EVERYONE!
</span>
</a>
</div>
CSS:
.home-logo-text a {
font-family: 'Oswald', sans-serif;
font-size: 60px;
font-weight: 700;
text-transform: uppercase;
position: relative;
margin-bottom: 0px;
text-align: center;
line-height: 1;
padding: 5px 25px 0;
border: 5px solid;
color: #808080;
}
.home-logo-text-roads {
font-family: 'Oswald', sans-serif;
font-size: 60px;
font-weight: 700;
text-transform: uppercase;
position: relative;
margin-bottom: 0px;
text-align: center;
line-height: 1;
padding: 5px 25px 0;
border: 5px solid;
color: #6698cb;
}
.home-logo-text.light a {
color: rgba(255,255,255,0.9);
}
.home-logo-text a:hover {
color: #6698cb;
}
.home-logo-text a:hover .home-logo-text-roads {
color: #808080;
}
a:hover .home-logo-text-roads {
color: #ffffff;
}
Your last CSS rule doesn't look right:
.home-logo-text-roads a:hover {
color: #ffffff;
}
This CSS says "for an <a> element sitting inside a .home-logo-text-roads element, when it gets hover change its text color to #ffffff. Which is clearly not what you wanted, since you have no <a> element inside your span. If you want to change the span's color on hover event of the <a> which is its parent, switch the selectors around:
a:hover .home-logo-text-roads {
color: #ffffff;
}
Remember when there's a space between selectors it indicates a fuzzy hierarchy and the rules are applied to the element to the far right.
You need this. Use whatever color you want.
.home-logo-text a:hover .home-logo-text-roads {
color: #707070;
}
Check DEMO here.
Put the correct order of the HTML elements so CSS styles will be applied:
.home-logo-text a {
color: #707070;
}
.home-logo-text-roads {
color: #6698cb;
}
.home-logo-text a:hover {
color: #6698cb;
}
.home-logo-text a:hover .home-logo-text-roads {
color: #ffffff;
}