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>
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
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;
}
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 a form with a textbox for email input and a button. The button is technically a HTML button here. The Form's HTML is like this:
<form class="form-wrapper cf">
<input type="text" placeholder="Enter your email here..." required>
<button type="submit">
Submit
</button>
</form>
JSFiddle Code: http://jsfiddle.net/ahmadka/aDhUL/
I'd like to convert the button type="submit" control to an input type="submit", while also keeping all the current CSS, so that visually there's no change. CSS would need to be updated I guess. I tried to do this myself, but I couldn't update the CSS correctly.
Can someone help me with this please ?
The basic solution requires changing the following everywhere in your CSS
button -> input[type=button]
input -> input[type=text]
I'd prefer to add a CSS class, instead of referencing the tag names, you could just use
<input type="text" class="text" />
<input type="submit" class="btn" />
That would require changing the following everywhere in your CSS
button -> input.btn
input -> input.text
This is not fully finished but almost works http://jsfiddle.net/aDhUL/7/
The problem is that the input:before directive inserts an element inside of the input. That is allowed for button, but not allowed for input , since input can't have child elements. http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/
So (if you want to use :before) you have to go back to a button, inserting a span element between the text field and the button won't allow you to have a hover effect on both the arrow and the button.
Why do you want to use input type="submit" in the first place?
You just need to change button to input[type=submit] in your stylesheets. If that doesn't work, then you'll need to be more specific about what problems you're having.
You will have to edit CSS, don't be lazy mate :)
<form class="form-wrapper cf">
<input type="text" placeholder="Enter your email here..." required>
<input type="submit" class="btn" value="submit">
</form>
CSS
.btn{
color:green;
}
Now you can also use after adding the class in CSS
<form class="form-wrapper cf">
<input type="text" placeholder="Enter your email here..." required>
<button type="submit" class="btn">Button</button>
</form>
All of the style sheets have to be updated to do so:
What is now this:
/* Form submit button */
.form-wrapper button {
Needs to become this:
/* Form submit button */
.form-wrapper input[type=submit] {
there are a bunch more classes to be updated below that one..
EDIT: changed it from a class to the style as joe points out.
Say I have the next form:
<form action="/orders/add" class="form-horizontal" id="OrderAddForm" method="post">
<div style="display:none;"><input type="hidden" name="_method" value="POST"></div>
<div class="control-group">
<button type="button" class="btn" id="new-order-line">New order line</button>
</div>
<div class="control-group">
<input class="btn my-hidden" type="submit" value="Save Orderr">
</div>
</form>
And my css:
.my-hidden {
display: none;
}
And my js:
$(function() {
$('#new-order-line').click(function() {
$('.my-hidden').show('slow');
});
});
So I want to display the 'Save Order' button whenever I click the 'New order line' button, but it seems that Twitter Bootstrap override my 'my-hidden' class because is inside of a 'form' element and my 'Save Order' button is always shown.
I've read that some people have the same problem
Some workaround to hide my button?
I don't view this as a problem per se. It may not be (easily) done with Twitter Bootstrap CSS rules but if the problem is that Twitter Bootstrap overrides what you want to do, you can always create your own rules with higher specificity.
One easy way would be to add to the attributes style="display: none;" since inline styles automatically enjoy top specificity.
A way of giving your class higher specificity is elaborating the selector a bit. For example, this has a higher specificity than your example but I don't know if it's enough:
.form-horizontal .control-group .my-hidden { display: none; }
(I hope I understood your problem correctly... berate me if not ;)