I'm far from an HTML wizard but do want to create a simple bootstrap button in html that I can enable and disable. My question is, assuming this is a bootstrap button:
<div class="button" onClick=doSomething >My Button</div>
would this be the proper way to keep the same button from being clicked?
<div class="button disabled" onClick=doSomething >My Button</div>
Thanks
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
Just switch classes btn-primary/btn-secondary and disabled state.
See documentation: Buttons - Bootstrap
You have a rather odd request here. I'm not sure why you aren't using Bootstrap classes, a button element, and the disabled attribute:
function go() {
console.log('went');
}
body {
padding: 30px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<button type="button" class="btn btn-primary" onclick="go()">Button</button>
<button type="button" class="btn btn-primary" onclick="go()" disabled>Button</button>
That said, you can turn off pointer events for any element with CSS:
function doSomething() {
console.log('clicking happened');
}
.disabled {
pointer-events: none; /* <-- here's your huckleberry */
opacity: 0.65;
}
.button {
display: inline-block;
background: #ddd;
padding: 4px;
margin: 2px;
border: 1px solid #ccc;
cursor: pointer;
}
<div class="button" onClick="doSomething()">"Button"</div>
<div class="button disabled" onClick="doSomething()">Disabled "Button"</div>
Related
I am trying to add fontawesome arrow icon to submit button in Wordpress using ContactForm7. I have this:
[submit class:button "Send a message "]
in css:
.wpcf7-submit:before {
content: '\f30b';
font-family: 'Font Awesome 5 Free' !important;
}
And it doesnt work, any ideas?
I know I'm a bit late to the party, but I've just found an easier option (or at least I thought so!) that helped me get an icon on my submit button.
No pseudo elements needed, you can just insert the element straight into the Contact Form:
<!--add the following instead of [submit] in Contact Form 7-->
<button type="submit" class="wpcf7-submit">Send Message<i class="fas fa-arrow-circle-right"></i></button>
<img class="ajax-loader" src="/wp-content/plugins/contact-form-7/images/ajax-loader.gif" alt="Sending ..." style="visibility: hidden; opacity: 1;">
You can also then add styles to the button like this:
/*Then you can add whatever style you want to your button*/
button.wpcf7-submit {
background: #31D1D3;
padding: 10px 15px;
border: 0;
}
button.wpcf7-submit i {
margin-left: 5px
}
button.wpcf7-submit:hover {
color: white;
}
button.wpcf7-submit:hover i {
color: white;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<!--just for this example, presume you already have font awesome installed if you're looking to output a button-->
<!--add the following instead of [submit] in Contact Form 7-->
<button type="submit" class="btn primary wpcf7-submit">Send Message<i class="fas fa-arrow-circle-right"></i></button>
<img class="ajax-loader" src="/wp-content/plugins/contact-form-7/images/ajax-loader.gif" alt="Sending ..." style="visibility: hidden; opacity: 1;">
Update:
You can even use Font Awesome Ajax Loader instead of the CF7 one!
/*Then you can add whatever style you want to your button*/
button.wpcf7-submit {
background: #31D1D3;
padding: 10px 15px;
border: 0;
}
button.wpcf7-submit i {
margin-left: 5px
}
button.wpcf7-submit:hover {
color: white;
}
button.wpcf7-submit:hover i {
color: white;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<!--just for this example, presume you already have font awesome installed if you're looking to output a button-->
<!--add the following instead of [submit] in Contact Form 7-->
<button type="submit" class="btn primary wpcf7-submit">Send Message<i class="fas fa-arrow-circle-right"></i></button>
<i class="fab fa-github ajax-loader" style="visibility: hidden; opacity: 1;"></i>
Update:
Contact Form 7 by default uses an <input type="submit"> element for the submit button. input elements can't use the ::before/::after pseudo elements because input elements don't have child nodes.
You'll need to change your submit button into an actual button (as shown here) for you to be able to add FontAwesome icons to it.
You also need to specify the font-weight property, otherwise the font won't be loaded by the browser.
.wpcf7-submit::before {
content: "\f30b";
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<form action="" method="post">
<button type="submit" class="wpcf7-submit">
Send
</button>
</form>
I styled my button everything is cool but can't change the blue color on click.
<button type="button" class="btn btn-primary">Log In</button>
.btn.btn-primary:focus {
background-color: and here color
}
doesn't work
The hover state has priority over the active or focus. You can see it on the snippet as both element has a color change for active, but only on for hover.
.btn:active { background-color: red }
.btn.btn-primary:hover { background-color: green }
<button type="button" class="btn btn-primary">With hover</button>
<button type="button" class="btn btn-secondary">No hover</button>
To solve this, you need to specify the order, and be clear in your selectors.
hover selector needs to be before the active selector.
.btn.btn-primary:hover { background-color: green }
.btn.btn-primary:active { background-color: red }
<button type="button" class="btn btn-primary">Button</button>
You need to override each pseudo-selector for the button that you want to change.
If you want to avoid using !important, then you are going to need to override a couple more selectors that Bootstraps sets. I commented these out in the snippet for simplicity's sake.
.btn.btn-primary {
background-color: orange
}
.btn.btn-primary:active,
.btn.btn-primary:hover,
.btn.btn-primary:focus {
background-color: orange !important;
}
/*
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
background-color: orange;
}
*/
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<button type="button" class="btn btn-primary">Log In</button>
Use
.btn:active {
background-color: red;
}
How can I use cursor: not-allowed on button or a? I tried the following:
.not-allowed {
pointer-events: auto! important;
cursor: not-allowed! important;
}
My button looks like this:
<a class="btn btn-primary btn-lg disabled not-allowed" href="https://www.example.com" role="button">Test</a>
Without the pointer-events is activated, the cursor can not be changed. But if pointer-events: auto, the button or a is clickable. If the pointer-events: none the cursor doesn't change.
Please help me, I despair!
This is actually a bug in Bootstrap
The proposed solutions :
button:disabled {
cursor: not-allowed;
pointer-events: all !important;
}
or if you have this kind of structure :
<li class="disabled">
My Link
</li>
then
li.disabled {
cursor: not-allowed;
}
li.disabled a {
pointer-events: none;
}
Use this:
.not-allowed {
cursor: not-allowed !important;
}
You can wrap your button in span like below
<span>
<button> click me </button>
</span>
Now in css don't allow pointer events on button and make cursor disabled for wrapper.
button {
pointer-events: none;
opacity: 0.7
}
span {
cursor: not-allowed;
}
use onclick="return false;"
.not-allowed{
cursor: not-allowed! important;
}
<a class="btn btn-primary btn-lg disabled not-allowed" onclick="return false;" href="https://www.example.com" role="button">Test</a>
You have a number of options, but not all of them are equal.
Preferably, wrap your element with a div or span and set the cursor on the wrapper and pointer-events on the content. This way you get all benefits without messing with JS.
Second, you can use the attribute disabled on a button, which will make it so that it does not work. You can thenset the cursor on the disabled element.
Lastly, but I don't advise it, is using JS to return false. Even though this works, I don't like it because: the click event is still triggered (i.e. clicking is still possible but the link is not followed through), meaning you also visually think you clicked the button.
.disabled-wrapper {
display: inline-block;
cursor: not-allowed;
}
.disabled-wrapper a,
.disabled-wrapper button {
pointer-events: none;
}
button[disabled] {
cursor: not-allowed;
}
a.disabled.js-test,
button.disabled.js-test {
cursor: not-allowed;
}
<div class="disabled-wrapper"><a class="btn btn-primary btn-lg disabled not-allowed" href="https://www.example.com" role="button">Test wrapper</a></div>
<button class="btn btn-primary btn-lg disabled not-allowed" href="https://www.example.com" role="button" disabled>Test disabled attribute</button>
<a class="btn btn-primary btn-lg disabled not-allowed js-test" href="https://www.example.com" role="button" onclick="return false">Test JS</a>
Most of the time not allowed is not work together with the disabled property.
is any one looking for disable with not allowed property here is code.
<style>
button
{
cursor:not-allowed;
}
</style>
<button disabled>
Click
</button>
I have been trying to find the relevant css that I need to change in Bootstrap to prevent this effect on clicking a button (see attached image)
Any help would much most appreciated!
EDIT : Here is the relevant code :
<div class="btn-group" dropdown container="body">
<button dropdownToggle type="button" class="btn dropdownToggle" style="background-color:#337ab7;color:white;">
Views <span class="caret"></span>
</button>
</div>
EDIT 2 : I managed to remove the border with this code :
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
outline: none;
}
However, there is still an effect when I click on the button (see image below) :
Is it possible to also remove this?
You have to set .btn:focus {outline: 0;}. If you need to remove focus globally just use this :focus {outline: 0;}
For the second question just use
.btn.active,
.btn:active {
box-shadow: none;
}
Most likely the default outline, here's a generic dropdown example with bootstrap 3.3.7 without outline:
button:focus {
outline: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="dropdown">
<button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dLabel">
...
</ul>
</div>
You may need to add a line of css that over-rides the bootstrap, like:
button {
border:0!important;
}
You will also have to remove the shadowing:
.btn.active, .btn:active {
-webkit-box-shadow: none;
box-shadow: none;
}
I have looked at the other questions about this and none of the solutions work. I have a vertical navBar that is supposed to hold buttons, which are also links, and they work fine when they are the default width but when I change the size all the buttons overlap and the only one that shows up is the last one.
Relevant CSS code:
.navBar{
background-color: #180639;
width: 20%;
color: #B6AFC1;
text-align: center;
border: 1px solid #B6AFC1;
font-family: Century Gothic, sans-serif;
font-size: 40px;
left: 0px;
position: absolute;
overflow: visible;
}
button.navBar{
font-size: 40px;
background-color: #675AFD;
margin: 10px;
padding: 10px;
display: inline-block;
float: left;
}
Relevant HTML:
<div class="navBar">
<button type="button" class="navBar">Home</button>
<button type="button" class="navBar">Community</button>
<button type="button" class="navBar">Events</button>
<button type="button" class="navBar" class="navBar">Pride Prom</button>
<button type="button" class="navBar">Resources</button>
<button type="button" class="navBar">Fundraising</button>
<button type="button" class="navBar">current_user.username</button>
<a rel="nofollow" data-method="delete" href="/users/sign_out"><button type="button" class="navBar" class="navBar">Log Out</button></a>
</div>
I am writing this using Ruby on Rails if that helps anyone come up with a solution. Sorry if the code is messy, I have been looking at a lot of solutions and adding a bunch of random stuff in just trying to force it to work. I should also note the end goal is for all the buttons to line up in a column
This is what it looks like presently
I think what's causing the problem here is that you are applying the position:absolute property to both the navbar <div> and the <button>s. You should separate the classes to apply separate styling to each, independently:
HTML: (note that I changed the classnames for the <button>s to navBar_button
<div class="navBar">
<button type="button" class="navBar_button">Home</button>
<button type="button" class="navBar_button">Community</button>
<button type="button" class="navBar_button">Events</button>
<button type="button" class="navBar_button">Pride Prom</button>
<button type="button" class="navBar_button">Resources</button>
<button type="button" class="navBar_button">Fundraising</button>
<button type="button" class="navBar_button">current_user.username</button>
<a rel="nofollow" data-method="delete" href="/users/sign_out"><button type="button" class="navBar_button" class="navBar">Log Out</button></a>
</div>
And CSS:
.navBar {
background-color: #180639;
width: 20%;
color: #B6AFC1;
text-align: center;
border: 1px solid #B6AFC1;
font-family: Century Gothic, sans-serif;
font-size: 40px;
left: 0px;
position: absolute;
overflow: visible;
}
.navBar_button {
font-size: 40px;
background-color: #675AFD;
margin: 10px;
padding: 10px;
display: inline-block;
}
Also keep in mind that you don't need the float:left if you have the display:inline-block for the buttons, you can use one or the other. And your navBar div is only 20% width, so these elements will essentially stack on top of each other. If you expand that width to 100%, they will then be next to each other along the top.