I've build a small form button but somehow I can't get the link to open in a new tab. I've tried the target blank attribute but no results. I've also tried changing onclick="window.location.href to onclick="window.open.href but nothing seems to work.. Here is the HTML:
<form>
<input style="width: 100%;
min-width: 50px;
max-width: 300px;
padding: 20px;
cursor: pointer;
box-shadow: 6px 6px 5px; #999;
-webkit-box-shadow: 6px 6px 5px #999;
-moz-box-shadow: 6px 6px 5px #999;
font-weight: bold;
background: #9b5103;
color: #000;
border-radius: 2px;
border: 1px solid #999;
font-size: 150%;" type="button" value="Kayak Tarifa" onclick="window.location.href='https://stackoverflow.com/'" />
</form>
</body>
Use window.open()
onclick="window.open('https://stackoverflow.com/')"
working demo : https://jsfiddle.net/gaq23jbL/1/
Use onclick="window.open('https://stackoverflow.com/', '_blank');" instead
input {
width: 100%;
min-width: 50px;
max-width: 300px;
padding: 20px;
cursor: pointer;
box-shadow: 6px 6px 5px #999;
-webkit-box-shadow: 6px 6px 5px #999;
-moz-box-shadow: 6px 6px 5px #999;
font-weight: bold;
background: #9b5103;
color: #000;
border-radius: 2px;
border: 1px solid #999;
font-size: 150%;
}
<form target="_blank">
<input style="" type="button" value="Kayak Tarifa" onclick="window.open('https://stackoverflow.com/', '_blank');" />
</form>
Related
I have some CSS that attempts to do a pressed in button effect on either "active" or "hover" events but for some bizarre reason, the CSS from the event also appears to affect other buttons which are not being hovered or active.
See below example - when you hover over any of the three buttons, the others margins get changed and move up/down when they shouldn't be affected at all.
What's going on?
input[type="button"], input[type="reset"], input[type="submit"] {
color: #000000;
cursor: pointer;
overflow: visible;
background-color: #F0F0F0;
border-bottom: none;
border-top: 1px solid #CCCCCC;
/*box-shadow: 0 -4px 0 #CCCCCC inset;*/
box-shadow: 0 -4px 0 0 rgba(204, 204, 204, 1) inset;
border-collapse: separate;
margin-bottom: 0;
padding: 3px 13px 6px 13px;
position: relative;
text-transform: uppercase;
background-clip: padding-box;
border-bottom-right-radius: 4px;
border-right: 1px solid #CCCCCC;
border-top-right-radius: 4px;
border-bottom-left-radius: 4px;
border-left: 1px solid #CCCCCC;
border-top-left-radius: 4px;
background-image: none;
}
input[type="submit"]:hover,
input[type="button"]:hover {
box-shadow: 0 -2px 0 #CCCCCC inset;
margin-top: 4px;
padding-bottom: 4px;
background-image: none;
}
<center>
<input value="Yes, submit now!" name="button" type="submit">
<!-- WARNING: value of button is checked on next page -->
<input value="No, enter more details" name="button" type="submit">
<input value="Exit" name="button" type="submit">
</center>
well they move because one of them get's margin-top:4px , so they all move after that element
i suggest you use transform:translateY(4px) instead of margin-top:4px on :hover
see snippet below
input[type="button"], input[type="reset"], input[type="submit"] {
color: #000000;
cursor: pointer;
overflow: visible;
background-color: #F0F0F0;
border-bottom: none;
border-top: 1px solid #CCCCCC;
/*box-shadow: 0 -4px 0 #CCCCCC inset;*/
box-shadow: 0 -4px 0 0 rgba(204, 204, 204, 1) inset;
border-collapse: separate;
margin-bottom: 0;
padding: 3px 13px 6px 13px;
position: relative;
text-transform: uppercase;
background-clip: padding-box;
border-bottom-right-radius: 4px;
border-right: 1px solid #CCCCCC;
border-top-right-radius: 4px;
border-bottom-left-radius: 4px;
border-left: 1px solid #CCCCCC;
border-top-left-radius: 4px;
background-image: none;
}
input[type="submit"]:hover,
input[type="button"]:hover {
box-shadow: 0 -2px 0 #CCCCCC inset;
transform:translateY(4px);
padding-bottom: 4px;
background-image: none;
}
<center>
<input value="Yes, submit now!" name="button" type="submit">
<!-- WARNING: value of button is checked on next page -->
<input value="No, enter more details" name="button" type="submit">
<input value="Exit" name="button" type="submit">
</center>
How do I style a button, with a shadow, so that it looks like it is pressed in?
I tried using box-shadow: ... ;. But this didn't have any affect.
By creatively styling the :active or :focus pseudo classes using a box-shadow: inset ...;
Using the :active pseudo class:
button {
background: #ededed;
border: 1px solid #ccc;
padding: 10px 30px;
border-radius: 3px;
cursor: pointer;
}
button:active {
background: #e5e5e5;
-webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
-moz-box-shadow: inset 0px 0px 5px #c1c1c1;
box-shadow: inset 0px 0px 5px #c1c1c1;
outline: none;
}
<button>
Click me
</button>
Using the :focus pseudo class:
button {
background: #ededed;
border: 1px solid #ccc;
padding: 10px 30px;
border-radius: 3px;
cursor: pointer;
}
button:focus {
background: #e5e5e5;
outline: none;
-webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
-moz-box-shadow: inset 0px 0px 5px #c1c1c1;
box-shadow: inset 0px 0px 5px #c1c1c1;
}
<button>
Click me
</button>
As an alternative to buttons, there is also a possibility to simply use checkbox with the pseudo-class :checked to toggle between states.
label.label-checkbox {
cursor: pointer;
}
label.label-checkbox input {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
pointer-events: none;
}
label.label-checkbox span {
padding: 11px 21px;
border: 1px solid #ccc;
display: inline-block;
color: #202020;
border-radius: 6px;
margin: 7px;
background: #f5f5f5;
user-select: none;
}
label.label-checkbox input:checked + span {
box-shadow: inset 1px 2px 5px #777;
transform: translateY(1px);
background: #e5e5e5;
}
<h1>Pressed buttons with Checkbox</h1>
<label class="label-checkbox">
<input type="checkbox">
<span>Checkbox</span>
</label>
<label class="label-checkbox">
<input type="checkbox" checked>
<span>Styled</span>
</label>
<label class="label-checkbox">
<input type="checkbox">
<span>As</span>
</label>
<label class="label-checkbox">
<input type="checkbox" checked>
<span>Pressed</span>
</label>
<label class="label-checkbox">
<input type="checkbox">
<span>Buttons</span>
</label>
The best way is to nudge the button lower on the page. Using transformY would be the most straight-forward. However that can mess up the layout of other things in the page. So I think that it is better to use margin to temporarily lower the button, such as,
button {
background-color: white;
padding: 10px;
vertical-align: top;
box-shadow: 2px 1px 2px gray;
margin: 4px 10px 4px 10px;
}
button:active {
box-shadow: 0 0 0 white;
margin: 6px 10px 2px 10px;
}
<button>click me</button>
<button>click me</button>
<br>
<button>click me</button>
<button>click me</button>
As in the example, you can take away 2px from the bottom margin, and add 2px to the top margin, therefore you preserve the total size of the button.
You need vertical-align in case there are more than one button.
I think that the best way to make a button looks like it's pressed it's to make it a little darker.
button{
background-color: #03A9F4;
border: none;
padding: 15px 25px;
text-transform: uppercase;
color: white;
font-weight: 700;
border-radius: 3px;
}
button:hover, button:focus{
background-color: #0074a9;
outline: none;
}
<button>Button</button>
If you think visually about what happens when a push-button (like on an old-style stereo system) is pushed in, the button moves back. Visually, the face of the button is darker. The text on the button is inset. The border of the button is dark.
The other answers here all give part of the answer.
This visually does all of the above:
.btnPushed {
color: #efefef; //orig text color was #FFF
text-shadow: -1px -1px 0px #777, -1px -1px 0px #777;
box-shadow: inset 1px 1px 4px #222;
transform: translateY(1px); /* Add per Vince's helpful comment */
}
As you might notice, we apply the styling by adding a class.
$('button').click(function(){
$('button').removeClass('depressed');
$(this).addClass('depressed');
});
button {
border: 1px solid black;
border-radius: 3px;
color: #f5f5f5;
background-color: #b8860b;
background-image: linear-gradient(-180deg,#6699FF,#3473F5 90%);
cursor: pointer;
font-size: 14px;
line-height: 20px;
outline: none; /* Removes Chrome's blue outline */
margin: 2px;
}
button:active{
}
.depressed{
color: #efefef;
text-shadow: -1px -1px 0px #777, -1px -1px 0px #777;
box-shadow: inset 1px 1px 3px #222;
margin: 3px -1px -1px 3px; /* T R B L */
transform: translateY(1px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<button>Button1</button>
<button>Button2</button>
<button class="depressed">Button3</button>
<button>Button4</button>
To avoid the adjustment (movement) of the other buttons due to the margin change, just put each button into a fix-size div. That way the buttons move around within their divs, without affecting the other buttons inside their own divs.
$('button').click(function(){
$('button').removeClass('depressed');
$(this).addClass('depressed');
});
div {
display: inline-block;
width: 65px;
height: 25px;
}
button {
border: 1px solid black;
border-radius: 3px;
color: #f5f5f5;
background-image: linear-gradient(-180deg,#6699FF,#3473F5 90%);
cursor: pointer;
font-size: 14px;
line-height: 20px;
outline: none; /* Removes Chrome's blue outline */
margin: 2px;
}
button:active{
}
.depressed{
color: #efefef;
text-shadow: -1px -1px 0px #777, -1px -1px 0px #777;
box-shadow: inset 1px 1px 3px #222;
margin: 3px -1px -1px 3px; /* T R B L */
transform: translateY(1px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div><button>Button1</button></div>
<div><button>Button2</button></div>
<div><button class="depressed">Button3</button></div>
<div><button>Button4</button></div>
Update:
Added transform: translateY(1px), per Vince's helpful comment below.
.button{
color: white;
background-color: blue;
padding: 8px 25px;
border-radius : 7px;
}
.button:active {
box-shadow: 0 0 0 black;
margin: 3px 0 0 0 ;
}
<input type="button" class="button" value="Enter">
button{
background-color:grey;
padding:10px;
border:none;
color:white;
}
button:hover{
background-color:black;
color:white;
}
<button class"b1">button</button>
I have to buttons "YES" and "NO" as shown in below images
For YES
HTML
<div class="margin-1half-em padding-zero text-center" >
<input type="button" class="login-btn cursor-pointer padding-left-1em padding-right-1em" value="YES">
</div>
CSS
.login-btn {
border: 1px solid #999999;
padding: 0.15em 0.75em;
color: #012258;
background: #15DB00;
font-weight: bold;
font-size: 1.2vw;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 0px 1px 2px 0px #666;
-moz-box-shadow: 0px 1px 2px 0px #666;
box-shadow: 0px 1px 2px 0px #666;
font-family: FTR55;
}
For NO
HTML
<div class="margin-1half-em padding-zero text-center" >
<input type="button" class="login-btn padding-left-1em padding-right-1em" style="background-color: red; color: white;" value="NO">
</div>
CSS
.login-btn {
border: 1px solid #999999;
padding: 0.15em 0.75em;
color: #012258; // Overridden for no
background: #15DB00; // Overridden for no
font-weight: bold;
font-size: 1.2vw;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 0px 1px 2px 0px #666;
-moz-box-shadow: 0px 1px 2px 0px #666;
box-shadow: 0px 1px 2px 0px #666;
font-family: FTR55;
}
Problem: Text NO is more bold then text YES. I have no idea why this happens ?
P.S: Padding and margin classes are just for padding and margins nothing else.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I'm wondering if it is possible to create button looks like this:
With CSS only (no additional images).
What do you think?
Yes, it is possible using box-shadow. The example uses an anchor (a) tag but can very easily be adapted to a button also.
a {
background: beige;
border-radius: 4px;
text-decoration: none;
display: block;
padding: 4px;
width: 100px;
text-align: center;
color: black;
-webkit-box-shadow: 0px 3px 1px maroon;
-moz-box-shadow: 0px 3px 1px maroon;
box-shadow: 0px 3px 1px maroon;
}
<a href='#'>Text hover</a>
Applying on button element: (Note to use border: 0px as buttons have a default border).
.shape {
background: beige;
border-radius: 4px;
padding: 4px;
width: 100px;
text-align: center;
-webkit-box-shadow: 0px 3px 1px maroon;
-moz-box-shadow: 0px 3px 1px maroon;
box-shadow: 0px 3px 1px maroon;
border: 0px;
}
<button class='shape'>Text hover</button>
Not sure why everyone is suggesting to use box-shadow, you can do this with border-radius and a bottom border alone:
body {
background: #000;
}
button {
background: #B6B694; /* Guesswork, you can find the actual colour yourself. */
border: none;
border-bottom: 2px solid #f00;
border-radius: 5px;
display: inline-block;
font-size: 14px;
padding: 10px 14px;
text-align: left;
width: 150px;
}
<button>Text hover</button>
You should post the code what tried so far. Any way try this one.
body {
background-color: #333;
text-align: center;
padding-top: 20px;
}
button {
background: beige;
border-radius: 3px;
box-shadow: 0px 5px 0px maroon;
border: 0;
color: #333;
font-size: 17px;
padding: 10px 30px;
display: inline-block;
outline: 0;
}
button:hover {
background: #eaeab4;
box-shadow: 0px 5px 0px #4d0000;
}
button:active {
box-shadow: none;
margin-top: 5px;
}
<button type="button">Text hover</button>
From http://www.css3.info/preview/box-shadow/:
Example Q shows a shadow offset to the bottom and right by 5px, with a border-radius of 5px applied to each corner:
#Example_Q {
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 5px 5px black;
-webkit-box-shadow: 5px 5px black;
box-shadow: 5px 5px black;
}
Example R shows the same shadow with a blur distance of 5px:
#Example_R {
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 5px 5px 5px black;
-webkit-box-shadow: 5px 5px 5px black;
box-shadow: 5px 5px 5px black;
}
.example {
moz-border-radius:20px;
webkit-border-radius:20px;
border-radius:20px;
}
You want to make sure the radius works in every browser so use this code make the radius to work in all browsers.
try it your own
border-radius:20px;
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
Here's what it looks like in Firefox:
What is looks like in Chrome:
Here are the CSS rules I'm using:
<div class="checkbox-field">
<p>Mr.</p>
<input type="radio" name="prefix" value="mr" />
<p>Mrs.</p>
<input type="radio" name="prefix" value="mrs" />
</div>
.checkbox-field input {
float: left;
margin-right: 46px;
border: 1px solid #A97232;
padding: 3px;
width: 22px;
-webkit-box-shadow: 0 1px 3px -1px black;
-moz-box-shadow: 0 1px 3px -1px black;
box-shadow: 0 1px 3px -1px black;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
color: #636363;
behavior: url(/Public/stylesheets/PIE.htc);
margin-top: 5px;
}
JSFiddle example here:
http://jsfiddle.net/zFNRy/
Please normalize your styles: http://necolas.github.com/normalize.css/