How can i hide button in css it the button text is read more.
I have a add to cart button on web site product archive page. But when the product will go out of stock the check changes to read more. I want to hie the button the the text changes to read more.
HTML
<input type="button" value="read more"/>
CSS
input[value="read more"]{ display:none; }
input[value="read more"]{
display:none;
}
<input type="button" value="read more"/>
<input type="button" value="add to cart"/>
You should add display: none; to yor button style to hide.
You should use a style to rub out the button styles, but it will still keep the button text there. Apply a css class such as this to the button
.icon-button {
border: none;
background:none;
}
Related
I have a problem with a button.
I want to fix that gray effect on click but i don't know how to do so.
<div class="col-lg-7 col-sm-5 col-md-11">
<form class="navbar-form">
<div class="input-group">
<input type="text" class="form-control" placeholder="Look for something cool">
<div class="input-group-append">
<button class="btn btn-outline-secondary"><i class="fas fa-search"></i></button>
</div>
add this to your css
button:focus {
box-shadow: none !important;
outline: none !important;
}
PS: it's not recommended to remove it, as it is meant to make the user experience more accessible for people with disabilities or people who are not using touch/mouse as control (for example, if you're trying to navigate to that button using TAB button it will be very hard)
Do you mean the hover? if so create some custom CSS that states:
.btn-outline-secondary:hover{
// YOUR STYLES HERE (the grey comes from the background so...)
background: red (or whatever you want)
}
I think you are referring to the outline of the button when clicked/focused.
here is the CSS you might consider:
.btn:focus {
outline: 0;
}
Here is the detailed answer to your question. Remove blue border from css custom-styled button in Chrome
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.
I have added two button in modal window in which one button is highlighted but when-ever i am going to click on screen it goes to normal.How can i make it stay highlighted.
I am using following code:
<button type="button" class="btn btn-default">New</button>
<button type="button" class="btn btn-default">Used</button>
<button type="button" class="btn btn-default" autofocus>Any</button>
So you want JSFiddle?
CSS
.active {
color: #F00;
}
JS
$('button').on('click', function() {
$('button').removeClass('active');
$(this).addClass('active');
}
HTML :
<button id="highlight" ..... ></button>
CSS :
#highlight, #highlight:hover, #highlight:active, #highlight:focus {
color://any-color;
// more css
}
NOTE : this is using the pseudo classes hover, focus and active, to keep the same style of the button unchanged when any event on the button occurs.
Try
var yourbuttons = document.getElementsByClassName('highlight-hover');
for (var i = yourbuttons.length - 1; i >= 0; i--) {
var currentbtn;
yourbuttons[i].onclick=function(){
if(currentbtn){
currentbtn.classList.remove("highlight");
}
this.classList.add("highlight");
currentbtn=this;
}
};
There's not really a css only method if you want the button to stay highlighted when you click another part of the screen. :active or :focus remove their styles when the element is not longer active or in focus
Here's a working version of what it seems you want because i'm bored at work https://jsfiddle.net/mksty8eq/
When you click on one button it stays highlighted until another button is clicked
First setting autofocus inside modal will not work always. You should set focus on button via javascript. Refer http://getbootstrap.com/javascript/#modals .
$('#myModal').on('shown.bs.modal', function () {
$('#button3').focus()
})
:focus and :active are pseudo-classes that allows us to define specific CSS rules depending on state of the element. In bootstrap .active and .focus classes has same CSS style as :focus and :active.
So add .active or .focus to the button that you want to highlight always.
<button type="button" class="btn btn-default active">Any</button>
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>
as the tittle says, is it possible to style a <input type="file"> to only show text like "Upload" without the button and the target file showing :)
i've tryed to google but all the answer doesnt cut it, the only answer that came close to what i wanted was done with javascript div trigger that would trigger.(click) on the input <input type="file"> but as it was pointed out that browser/mobile phones would take this as a "attack" and wouldn't allow the $_POST!
Check this CustomInputFile use Bootstrap its more easy to customize.
You can do this by mocking the input element and binding an event listener to a div or whatever you would like to use like this:
HTML:
<form>
<input type="file" id="upload"/>
<div id="button">Upload</div>
</form>
CSS:
#upload{
display: none;
}
#button{
display: inline-block;
cursor: pointer;
}
JavaScript:
document.getElementById("button").addEventListener("click", function(){
document.getElementById("upload").click();
});
JSFiddle:
http://jsfiddle.net/12Lp66p2/