In my form I have a submit button:
<button name ="sort" value="sort" type="submit">▼</button>
The button looks like a "button". This is not what I want, I would simply like the button look like this:
▼
So this means without any style, only the black arrow. Is this possible?
Yes, you can just use CSS to remove the background and border
button {
background: none;
border: none;
}
<button name ="sort" value="sort" type="submit">▼</button>
<button name ="sort" value="sort" type="submit" style="background-color:transparent;border:0">▼</button>
The only properties of the button which are visible are background and border. So you have to set these properties to nothing like the following code:
button {
background:none;
border:0;
}
<button name ="sort" value="sort" type="submit">▼</button>
Hint: If you want to define the rule only for this button you have to replace button with button[name="sort"] or set a class.
Related
I have some button styling, which applies when the button has the disabled attribute.
However, I also have a .loading class that I'd like to apply to buttons.
I want the disabled styling to apply only if the button does not have the loading class.
Please see my JS Fiddle: https://jsfiddle.net/pbcykx5L/
I'm imagining something like this, but it doesn't work. Is there a way of doing this?
.btn:not(.loading):disabled {
background-color: #cdd9c3;
border-color: #cdd9c3;
text-shadow: none;
cursor: not-allowed;
}
It does work. In your fiddle, there is no difference in the styles being applied to .btn:not(.loading):disabled and .btn:disabled. If you change the background color of one to red, you can see the CSS is being properly applied.
.btn:disabled {
background-color: #cdd9c3;
}
.btn:not(.loading):disabled {
background-color: red;
}
<button class="btn">Button</button>
<button class="btn" disabled>Button (disabled)</button>
<button class="btn loading" disabled>Button (disabled and loading)</button>
I have 3 command buttons that filters a datatable and I want to keep the bottom border active to indicate which button was clicked.
So far, what I've done in a CSS is:
.ui-button.ui-state-hover, .ui-button.ui-state-active {
border-bottom-color: #ccff00;
border-bottom-style: solid;
border-bottom-width: thick;
}
Using the above CSS, when I hover over a button, the color of the bottom border changes, as expected; but when I click the button, the color of the bottom border doesn't keep activated and the button go back in its original normal state.
Does anyone knows how can I do to keep the color of the bottom border in a button last clicked ?
Thanks in advance.
To achieve the goal of leaving the border the same color after clicking it, we need to use Javascript to append or attach a new class
This is also using jQuery for quickness.
$(".btn").click(function(){
$(this).addClass("active");
});
body {
margin:50px;
}
button {
padding:20px;
border:4px solid #333;
background-color: #fff;
color:#333;
transition.5s;
}
button:hover {
border-bottom-color:red;
transition:.5s;
}
.active {
border-bottom-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn">Click Me!</button>
<button class="btn">Click Me!</button>
<button class="btn">Click Me!</button>
Now the active class will be attached onto the button as long as the page is not refreshed/reloaded. If you want to remove the class simply check on click again and see if the class is attached, if so remove it and repeat.
I'm using asp.net ImageButton and it looks like:
I want to remove that blue border.
I have tried
border: 0px;
border-style:none;
But same result.. How can I solve that?
I'm using that for voting system and I want to execute some server side code on this button click
Assuming that the border is NOT part of the image. This is what you can try:
border:none;
outline:none
append the !important declaration just in case there is some overriding your styles
Example
<asp:ImageButton ID="btnLike" runat="server" style="border:none !important;outline:none !important" .../>
Update based on comment
Since you are setting the image as a background image (dunnot why since you're already using an ImageButton) make sure that the background of your button has no color...background-color: transparent
If you are setting your image as a CSS background, this issue may solvable by setting the image via URL.
Create class like this and choose your image to show on button. include class in button. see below :
Css Style :
.btn {border:none; background:url(image/loader.gif); }
Your Button Code :
<input type="button" value="Submit" class="btn" />
try this , in CSS file
border: 0px solid transparent;
outline: transparent solid 0px;
I want text instead of the button that is provided in rails.
I've added a class to the submit button, but this is where I'm stuck. Normally in CSS if I want something to be text I just don't style it. But in this case, the button is styled automatically to look like a button.
How do I overide this and make it look like just text?
Here's your button with a class of no_style (or whatever you would like):
<button class="no_style">test</button>
Then in your stylesheet call the button with a class of no_style:
button.no_style {
background: none;
border: none;
}
You may need to inspect the button to see if there is any other styling on it. You can inspect it by right clicking on the button and select "inspect element". If your button has any other styles, I can help you remove them. Just let me know if anything else shows up and I can show you how to remove it.
If you want to change the text you can still style the text without the look of a button, like this:
button.no_style {
background: none;
border: none;
color: red;
font-size: 24px;
text-transform: uppercase;
}
Is this what you were looking for?
I have a button like so:
<button>Click Me</button>
I want to make that button linked with an href. Is it compliant HTML to wrap the button in a tag or to put the tag inside of the button to make it linkable?
Thanks
You may just want to use a link itself and style it like a button. You can still add an onclick, but it makes linking to a new page really easy.
a.button{
color: #000000;
text-decoration: none;
display: block;
background: #FFFFFF;
border: solid 1px black;
}
A less appealing (though commonly used) method is to wrap a link around an image.
<img src="/images/button.png"/>
I think the correct way would be to put the button in a form, and set the form's action attribute to the page you want to link to and the button's type attribute to submit.
e.g.
<form action="nextpage.html" method="get">
<button type="submit"> Next </button>
</form>