i created a button using HTML and i'm trying to style the bottom to give it a different cursor style when i click the button. how do I go about it?
In your css you can apply the cursor style for your button. You can also use inline style. Small examle.
button {
cursor:crosshair;
}
<button>btn</button>
You can accomplish this with a cursor css property. Check Mozilla's documentation for more indepth explanation regarding the property.
I've just read your question again and I see you want the cursor to change when a button press has occurred and is still lasting. You can accomplish it with an :active pseudo-class.
button:active {
cursor: help;
}
<button href="#">test button</button>
When the html is already parsed (DOMContentLoaded event) the script starts to work. We add an event listener for a click on this particular button and when it's clicked we assign a class for styling, for instance, a disabled state with another cursor.
I add a cursor with a pointing hand to a default state of the button since there's no default cursor: pointer; for buttons in browsers by default.
The 'clicked' cursor state is applied and works in browser (you can check it in Developer Tools in Chrome or another browser) after clicking on the button but it looks buggy in the result section of the code snippet below for some reason so check this approach in your code and browser.
Good luck😀
document.addEventListener('DOMContentLoaded', (event) => {
let buttonExample = document.querySelector(".button-example");
buttonExample.addEventListener('click', (event) => {
event.target.classList.add("button-example--disabled");
});
});
.container{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.button-example{
font-family: sans-serif;
font-weight: bold;
font-size: 16px;
line-height: 1;
padding: 1em 2em;
text-transform: uppercase;
background-color: #fff;
border: 2px solid #000;
border-radius: 0.5em;
color: #000;
}
.button-example:hover{
cursor: pointer;
}
.button-example--disabled{
background-color: #fefefe;
border-color: grey;
color: grey;
cursor: not-allowed;
}
<div class="container">
<button type="button" class="button-example">Button text</button>
</div>
button {
cursor:pointer;
}
<button>Click</button>
When I use the hover and visited properties on a styled component it seems to conflict.
https://codesandbox.io/s/heuristic-volhard-n03ik?file=/src/styles.css:0-326
.button:visited {
background-color: green;
}
.button:visited:hover {
background-color: red;
}
.button:hover {
background-color: blue;
}
.button {
background-color: black;
padding: 10px;
text-decoration: none;
transition: background-color 0.5s ease;
}
What I am trying to archive here is having 2 states:
not visited: black hover directly to blue
visited: green hover directly to red
But in Firefox it seems to ignore the visited state on hover and go from green to blue to red. (In chrome it seems to work perfectly)
Does anyone has experience with this and know how to fix it?
When a button that is not styled by any css is clicked, it turns blue for an instant and then returns to its normal white color.
However, when a button that is styled as shown below is clicked, a blue highlight appears around it and does not go away until something else on the screen is clicked.
I would like my button not to have this weird blue highlight. How would I fix this and still keep the button styled?
Any solutions I have found thus far involve javascript, but I am looking for a pure css solution here.
<html>
<head>
<style>
button {
border: solid #316A8F;
border-radius: 12px;
background-color: #F9F9F9;
color: #003C63;
}
</style>
</head>
<body>
<button>click me.</button>
</body>
</html>
It's called focus try this:
button:focus {
outline: none;
}
button {
border: solid #316A8F;
border-radius: 12px;
background-color: #F9F9F9;
color: #003C63;
}
button:focus {
outline: none;
}
<button>click me.</button>
How would I go about adding styling when a user taps on a button via mobile for gmail and outlook? My goal is to have the user know that they tapped the button on mobile.
there are two ways of achieving this by using a tag.
First one use a:target
a {
padding: 10px;
background: green;
}
a:target {
background: red;
}
Second one is using a:visited
a {
padding: 10px;
background: green;
}
a:visited {
background: red;
}
I'm trying to change the style of a button with an embedded image as seen in the following Fiddle:
http://jsfiddle.net/krishnathota/xzBaZ/1/
In the example there are no images, I'm afraid.
I'm trying to:
Change the background-color of the button when it is disabled
Change the image in the button when it is disabled
Disable the hover effect when disabled
When you click on the image in the button and drag it, the image can be seen separately; I want to avoid that
The text on the button can be selected. I want to avoid that, too.
I tried doing in button[disabled]. But some effects could not be disabled. like
top: 1px; position: relative; and image.
For the disabled buttons you can use the :disabled pseudo class. It works for all the elements that have a disabled API (typically form elements).
For browsers/devices supporting CSS2 only, you can use the [disabled] selector.
As with the image, don't put an image in the button. Use CSS background-image with background-position and background-repeat. That way, the image dragging will not occur.
Selection problem: here is a link to the specific question:
How to disable text selection highlighting
Example for the disabled selector:
button {
border: 1px solid #0066cc;
background-color: #0099cc;
color: #ffffff;
padding: 5px 10px;
}
button:hover {
border: 1px solid #0099cc;
background-color: #00aacc;
color: #ffffff;
padding: 5px 10px;
}
button:disabled,
button[disabled]{
border: 1px solid #999999;
background-color: #cccccc;
color: #666666;
}
div {
padding: 5px 10px;
}
<div>
<button> This is a working button </button>
</div>
<div>
<button disabled> This is a disabled button </button>
</div>
I think you should be able to select a disabled button using the following:
button[disabled=disabled], button:disabled {
// your css rules
}
Add the below code in your page. No changes made to button events, to disable/enable the button simply add/remove the button class in JavaScript.
Method 1
<asp Button ID="btnSave" CssClass="disabledContent" runat="server" />
<style type="text/css">
.disabledContent
{
cursor: not-allowed;
background-color: rgb(229, 229, 229) !important;
}
.disabledContent > *
{
pointer-events:none;
}
</style>
Method 2
<asp Button ID="btnSubmit" CssClass="btn-disable" runat="server" />
<style type="text/css">
.btn-disable
{
cursor: not-allowed;
pointer-events: none;
/*Button disabled - CSS color class*/
color: #c0c0c0;
background-color: #ffffff;
}
</style>
By CSS:
.disable{
cursor: not-allowed;
pointer-events: none;
}
Them you can add any decoration to that button.
For change the status you can use jquery
$("#id").toggleClass('disable');
To apply grey button CSS for a disabled button.
button[disabled]:active, button[disabled],
input[type="button"][disabled]:active,
input[type="button"][disabled],
input[type="submit"][disabled]:active,
input[type="submit"][disabled] ,
button[disabled]:hover,
input[type="button"][disabled]:hover,
input[type="submit"][disabled]:hover
{
border: 2px outset ButtonFace;
color: GrayText;
cursor: inherit;
background-color: #ddd;
background: #ddd;
}
consider the following solution
.disable-button{
pointer-events: none;
background-color: #edf1f2;
}
For all of us using bootstrap, you can change the style by adding the "disabled" class and using the following:
HTML
<button type="button"class="btn disabled">Text</button>
CSS
.btn:disabled,
.btn.disabled{
color:#fff;
border-color: #a0a0a0;
background-color: #a0a0a0;
}
.btn:disabled:hover,
.btn:disabled:focus,
.btn.disabled:hover,
.btn.disabled:focus {
color:#fff;
border-color: #a0a0a0;
background-color: #a0a0a0;
}
Remember that adding the "disabled" class doesn't necessarily disable the button, for example in a submit form. To disable its behaviour use the disabled property:
<button type="button"class="btn disabled" disabled="disabled">Text</button>
A working fiddle with some examples is available here.
When your button is disabled it directly sets the opacity. So first of all we have to set its opacity as
.v-button{
opacity:1;
}
Need to apply css as belows:
button:disabled,button[disabled]{
background-color: #cccccc;
cursor:not-allowed !important;
}
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
{
// apply css here what u like it will definitely work...
}
And if you change your style (.css) file to SASS (.scss) use:
button {
background-color: #007700;
&:disabled {
background-color: #cccccc;
}
}