I am new css and I am having hard time changing the color of the button when clicked. Normally, when a button is clicked, the button color becomes blue for a very short period of time. I want it instead to be yellow. How can I achieve that?
html
<button id="btn">Hi</button>
It's very easy. You can get this by :active and :focus states. Just try the below snippet. (You can change the colors as per your needs.)
button {
background: #0095ff;
border: none;
padding: 10px 20px;
color: #fff;
outline: none;
}
button:active, button:focus {
background: yellow;
color: #000;
}
<button>Click Me!</button>
As you are new to CSS, if you need then you can read this if you want to:*
https://developer.mozilla.org/en-US/docs/Web/CSS
Related
I have the following piece of code:
<button type="button" class="btn btn-success" onclick="validateForm()">Book appointment</button><br><br>
<p id="submitted" style="background:black"><p>
In black is the button and in green is the active button. How do I change the active color of this button? I have tried multiple things like:
.btn.btn-success:active{
background: #933A16;
}
Or
btn.btn-success:active{
color #933A16;
}
Or
.btn:active{
color: #933A16;
}
And nothing has worked. It keeps showing up as that green color. I don't jave green anywhere else on the CSS file.
First, I think you want to use background-color or background, I see you have background in your first example but color in the next two. You can also try to add the !important statement just before the semicolon to override bootstrap's settings.
If you are looking to change every button active color then you should like at Theming Bootstrap: https://getbootstrap.com/docs/4.0/getting-started/theming/#color
If you just want to modify this single button you could add a custom class for it:
<button type="button" class="btn btn-success custom-class" onclick="validateForm()">Book appointment</button><br><br>
.custom-class:active {background-color: green !important;}
Similar to what Burela said - adding '!important' will override the default for Bootstrap, so if you set the background-colour (rather than just background) to what you want with !important at the end, that is what will be used. Do this is a new class. Also, 'color' is used for the font, rather than the actual button.
Define the enabled and disabled styles.
Assign and id to your button.
<button id="btnId" ...>
In the body of your function, add the following line to change the button style.
document.getElementById("btnId").className = "button disabled";
Check example below:
<html>
<head>
<style>
.button {
background-color: #4CAF50;
/* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.disabled {
opacity: 0.6;
cursor: not-allowed;
background-color: black;
}
</style>
</head>
<body>
<button class="button">Normal Button</button>
<br>
<button class="button disabled">Disabled Button</button>
<br>
<button id="btnId" onclick="validateForm()" class="button">Click once to disable</button>
<script>
function validateForm() {
<!-- Do validation -->
document.getElementById("btnId").innerHTML = "YOU CLICKED ME! I'm disabled now";
document.getElementById("btnId").className = "button disabled";
}
</script>
</body>
</html>
If you are wanting to change the button color when you tab to it, then you should use the “focus” option.
The CSS styling.
<style>
/* Set button default color */
.btn-primary{
font-family: TimeBurner;
font-size: 25px;
background-color: #999;
border-color: #222222;
margin: 3em;
padding: 1em;
}
/* Set button color on hover */
.btn-primary:hover{
background-color: #ba321d;
border-color: #000000;
}
/* Set button color when clicked on */
.btn-primary.active,
.btn-primary:active
{
background-color: #339933;
border-color: #000000;
}
/* Set button color when tabbed to (active) */
.btn-primary:focus{
background-color: #339933;
border-color: #000000;
}
</style>
On the html page.
<button class="btn-primary">Button1</button>
<button class="btn-primary">Button2</button>
<button class="btn-primary">Button3</button>
<button class="btn-primary">Button5</button>
I've around 50* buttons and I want to change the style only for not disabled button
button{
background-color: white;
}
You need to use :disabled selector.
button:disabled {
background: white;
}
I tried this CSS:
html.dark .btn:hover:not(disabled),
html.dark .btn:focus {
color: #ffffff;
background-color: #222222;
*background-color: #151515;
}
html.dark .btn.disabled,
html.dark .btn[disabled] {
color: red;
background-color: #222222;
*background-color: #151515;
}
But still when I hover over the button I see the color change from red to white. Note that it's correctly picking up the fact it's disabled. I am using:
disabled="disabled"
in my button.
Try .btn:hover:not(:disabled),
A small example
Your example didn't work because you are using .btn:hover:not(disabled) you have to use a pseudo class to achieve what you need reference pseudo classes
button:hover:not(:disabled){
color:red;
}
<button>Not disabled</button>
<button disabled>disabled</button>
I have a span tag within a button. I just want the span text to change on hover from white to dark when I hover the button. The only way right now it will work is if I put the hover on the span tag itself and then the mouse pointer has to be exactly on the text within the button. If not the whole button is white on hover.
a.sf-button.transparent-dark span {
}
a.sf-button.transparent-dark span:hover {
}
a.sf-button.transparent-dark {
color: #FFF;!important;
background-color: #12225b;
}
a.sf-button.transparent-dark:hover {
color: #666;!important;
background-color: #FFF;
border: 1px solid #222;
border: 1px solid rgba(34,34,34,.2);
}
a.sf-button, a.sf-button:hover, #footer a.sf-button:hover {
color: #666;
background-color: #FFF;
border: 1px solid #222;
border: 1px solid rgba(34,34,34,.2);
}
`
I can not change the way the button is setup because its part of a theme.
Here is the HTML:
<a class="sf-button large transparent-dark stroke-to-fill " href="https://www.domain.com" target="_self"><span class="text">button text</span></a>
I actually went ahead and setup a fiddle for this. And it actually works on the fiddle. So perhaps this means something is interfering with it. But I can not determine what would be.
http://jsfiddle.net/robmcmon/4ZWUX/
You should be able to do something like this:
.test-button:hover .test-span {
color: #ff0000;
}
This should change the spans appearance when the button is changed.
Fiddle: http://jsfiddle.net/DbpgW/
Is there any option, or special selector to change the style for a pressed button, what I mean by that..when a user clicks a button I want to change the style for that button? Is there any option to do that like: :focus or only with javascript click/focus event?
I think you are looking for the :active pseudo-class...
#btn { border: solid 5px red; padding: 5px; }
#btn:hover { border-color: green; }
#btn:active { border-color: blue; }
<button id="btn" />
Note: if you are using both :hover and :active on a single element, the :hover definition must come first.