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')"
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 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>
As I said, depending on what browser I'm using, the button varies for some reason.
Here's the code I'm using right now-
HTML-
<input type="button" id="submitButton" onclick="generateLink()" value="Go" />
CSS-
#submitButton {
display: block;
color: white;
background-color: #8373e6;
font-size: 26px;
font-family: "Raleway", sans-serif;
font-weight: 400;
outline: none;
border: 3px solid #8373e6;
padding: 5px 15px;
margin: 20px;
border-radius: 30px;
box-shadow: 0 0 20px #9c9c9c67;
width: min-content;
cursor: pointer;
}
#submitButton:hover {
background-color: #6b5ebd;
}
#submitButton:active {
background-color: #554a97;
}
Whenever I look this up on the live server on my Windows PC (on both Firefox and Chrome), it looks the way I want it to. But when I deploy the test site on Firebase and check it out on my mobile phone (iPhone with Safari Browser), The text "Go" is gone and all I can see is a flat, text-less button.
I have also tried changing the <input> tag to a <button> tag, adding a display: block; and a bunch of other stuff but it doesnt seem to work.
Any idea why this could be happening?
Please and thanks.
Have you tried using anchor element ?
Go
a{
display: block;
color: white;
background-color: #8373e6;
font-size: 26px;
font-family: "Raleway", sans-serif;
font-weight: 400;
outline: none;
border: 3px solid #8373e6;
padding: 5px 15px;
margin: 20px;
border-radius: 30px;
box-shadow: 0 0 20px #9c9c9c67;
width: min-content;
text-decoration:none;
}
a:hover {
background-color: #6b5ebd;
cursor:pointer;
}
a:active {
background-color: #554a97;
}
I have a 'Download' button on my HTML webpage and I have set some attributes for it.
Whenever I refresh my page, the button appears like this, very rarely:
Text Outside the Button
But then, it will look like this and this is the normal-looking button:
Normal Button
.navbar-download-btn {
position: absolute;
right: 4%;
top: 5.7%;
color: white;
background-color: blue;
border: 2.2px solid white;
padding: 0.8%;
border-radius: 3.5px;
outline: none;
cursor: pointer;
font-weight: bolder;
font-family: Noto Sans KR, sans-serif;
letter-spacing: 0.7px;
transition: 0.7s;
}
<button class="navbar-download-btn nonindex">Download</button>
I think there might be a problem in the padding of the download button, Increase the padding from the right and also try running this code in other browsers, this had been a problem for me too earlier but sometimes it could just be your browser...
text-align: center;
margin-right:
Currently my buttons in a drop down menu are showing a black outline around each of the buttons (as pictured), but I am trying to remove them so that the buttons look more integrated with the background (or alternatively make the outline white) so that you can't see it. This is my current html code
<input type="button" className = 'profiletype' name="profile_type" value={name} onClick={submit}>Social</input>
<input type="button" className = 'profiletype' name="profile_type" value={name} onClick={submit}>Professional</input>
and this is my CSS code for profiletype
.profiletype {
background-color: white;
font-weight: 300;
letter-spacing: 1px;
color: black;
cursor: pointer;
text-transform: uppercase;
margin: 5px;
text-align: center;
}
and I've attached an image of what it currently looks like. Thanks!:
current image
About that outlining - it is default style for input type="button" applied by the browser. To fix it you can declare your own border style. For example: border:1px solid blue;
.profiletype {
background-color: white;
font-weight: 300;
letter-spacing: 1px;
color: black;
cursor: pointer;
text-transform: uppercase;
margin: 5px;
text-align: center;
border:1px solid blue;
}
<input type="button" class = 'profiletype' name="profile_type" value='Professional' />
<input type="button" class = 'profiletype' name="profile_type" value='Social' />