On my site I have a disabled button. After hover event it changes a color for a wrong one.
I want to change a hover colour for this button and I can't find / don't know what is a class name disabled button hover in the bootstrap framework for this issue.
Exmaple is:
<button type="submit" class="btn btn-primary" disabled="disabled">My disabled button</button>
These are the two types of disabled button you can make with bootstrap:
1.Disabled UI, but not the button itself [use the class disabled] (try clicking the button in the snippet)
2.Button disabled | Bootstrap applies the disabled effect here by default. [or use both: the attribute and the disabled class].
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<button type="submit" class="btn btn-primary disabled" onclick="alert('not actaully disabled');">My disabled button</button>
<button type="submit" class="btn btn-primary" disabled onclick="alert('not actaully disabled');">My disabled button</button>
.btn-default[disabled] {
background: #ccc !important;
}
.btn-default[disabled]:hover {
background: #ccc !important;
}
I'm using this.
Thank you for your help.
I've found right class name for this issue.
Just put
.btn[disabled]:hover {
background:#bedd16;
}
.btn[disabled]:active:focus {
color: #000000;
}
.btn[disabled]:focus {
background: #bedd16;
color: #666666;
}
for change a disabled button hover backgroud ... ;)
Bootstrap have disable class in button
you can use like this
<input type="submit" class="btn btn-default" disabled>
CSS
input[disabled] {
cursor:not-allowed;
}
No any javascript need for button disable.
Related
How can input:focus retain the focus even if it is redirected to another HMTL file?
I also tried input:active and input:target.
CSS
.titleBar input:focus{
border-bottom-style: solid;
border-bottom-color: #3c3c5d;
}
HTML
<div class="titleBar">
<input type="button" value="Dashboard" onclick="window.location.href='index.html'">
<input type="button" value="Employee Information" onclick="window.location.href='employees.html'">
<input type="button" value="Customer Information">
<input type="button" value="Financial Information">
<input type="button" value="Presentation Materials">
<input type="button" value="Logout" onclick="window.location.href='login.html'">
</div>
It should remain focused when it is redirected to another html file when the input is clicked. It will remain focused until another input is clicked
This is not achievable only with CSS. You need to write some JS code too.
const makeActive = () => {
document.getElementById('thatInput').focus();
}
And you can call this function whenever you are redirecting to another html.
Note: I trid autofocus, it didn't work.
I added a button code from bootstrap which goes like this:
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal">
Start Javascript
</button>
due to this code button color is red and i want to change that into orange for that i added a css file and linked that with html which goes like this:
.btn btn-danger {
background-color: orange;
}
but still color of button is red insted of orange
Correct CSS rule is
.btn.btn-danger {
background-color: orange;
}
I have a problem here which I want to click button then go to another page. But it does not function
This is my code
<button type="button" class="btn btn-edit btn-sm pull-right" data-toggle="modal" data-target="#modal-editProfile" href="template/home.html">Start Booking Your Room</button>
I do not know why, the button does not function.
please help me, I have wasted my whole day just doing this.
Thanks,
faizal
HTML
The plain HTML way is to put it in a <form> wherein you specify the desired target URL in the action attribute.
<form action="http://google.com">
<input type="submit" value="Go to Google">
</form>
Set if necessary CSS display: inline; on the form to keep it in the flow with the surrounding text.
CSS
If CSS is allowed, simply use an <a> which you style to look like a button using among others the appearance property (only IE support is currently (July 2015) still poor).
Go to Google
a.button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
text-decoration: none;
color: initial;
}
Or pick one of those many CSS libraries like Bootstrap.
JS
If JavaScript is allowed, set the window.location.href.
<input type="button" onclick="location.href='http://google.com';" value="Go to Google" />
Source
Buttons won't redirect you to another page unless you handle that in javascript. If you just want to redirect, you may use anchor tag, see example below:
<a class="btn btn-edit btn-sm pull-right" href="template/home.html">Start Booking Your Room</a>
I want btn in navbar (which appeared only toggled) get btn-info color.
I add a btn-info class,
btn's text color changed to white
and btn color was unchanged.
I used default bootstrap 3 css.
bootply - click mobile view
<a class="btn btn-info navbar-toggle" value="Page" href="javascript:win_memo('', '<?=$member[mb_id]?>', '<?=$_SERVER[SERVER_NAME]?>');" onfocus="this.blur()">
<i class="glyphicon glyphicon-envelope"><sup style="margin-left:3px;"><?=$member[mb_memo_unread]?></sup></i>
</a>
you need to use ( !important ) for your btn-info property value, because the (.btn-info)
is overridden by the (.navbar-toggle) class value, so the solution is to add this code to your custome.css file or any file that you use to override the main bootstrap.css file.
code:
.btn-info {
color: #fff;
background-color: #5bc0de !important;
border-color: #46b8da !important;
}
hope this will help you.
Ahmed Na's Answer works well. Great idea.
I add a class btn-info-navbar.
.btn-info-navbar {
color: #fff;
background-color: #5bc0de !important;
border-color: #46b8da !important;
}
and add btn-info-navbar.
<a class="btn btn-info btn-info-navbar navbar-toggle" value="Page" href="javascript:win_memo('', '<?=$member[mb_id]?>', '<?=$_SERVER[SERVER_NAME]?>');" onfocus="this.blur()">
<i class="glyphicon glyphicon-envelope"><sup style="margin-left:3px;"><?=$member[mb_memo_unread]?></sup></i>
</a>
How can I make space between buttons in navbar? I usually do that with but it doesn't work now. Here's an JSfiddle of how it looks:
http://jsfiddle.net/W6hEa/
you may try margin-left
here is the code
.btn{
margin-left:10px;
}
here is the example:: FIDDLE
Copy & paste this to your style.css and assign it as class attribute:
.btn-margin-left {
margin-left: 2px;
}
.btn-margin-right {
margin-right: 2px;
}
Usage
Link
<button type="button" class="btn btn-default btn-sm btn-margin-left">Button</button>
You can define spacing inside the class in bootstrap 4.0x.
https://getbootstrap.com/docs/4.0/utilities/spacing/
So for example
<button type="button" class="btn btn-default ml-2>Button</button>