I have a button and I need it to be lightning on hover
.button {
font-size: 16px;
position: relative;
top: 20%;
background: #fcffdc;
color: #de204f;
border: none;
border-radius: 3px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
padding: 20px 20px 14px 20px;
&:hover {
background: #fcffdc;
cursor: pointer;
box-shadow: -4px -4px 4px rgba(250, 0, 20, 0.4);
But it has only a shadow in front of the button. How do a shadow all over the button?
in chrome dev tools you can edit box-shadow property using visual editor,
it's quite useful and you can build whatever shadow you'd like.
for current case don't forget to toggle :hover element state
and here's your code
.button {
font-size: 16px;
position: relative;
top: 20%;
background: #fcffdc;
color: #de204f;
border: none;
border-radius: 3px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
padding: 20px 20px 20px 20px;
display: inline-block;
cursor: pointer;
transition: background-color .4s;
}
.button:hover {
color: white;
background: gray;
cursor: pointer;
box-shadow: 0 0 20px rgba(250, 0, 20, 0.4);
}
<a class='button'>Hello</a>
<style>
.button {
font-size: 16px;
position: relative;
top: 20%;
background: #fcffdc;
color: #de204f;
border: none;
border-radius: 3px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
padding: 20px 20px 14px 20px;
}
.button:hover {
background: #fcffdc;
cursor: pointer;
-webkit-box-shadow: 0 0 5px 2px rgba(250, 0, 20, 0.4);
-moz-box-shadow:0 0 5px 2px rgba(250, 0, 20, 0.4);
box-shadow: 0 0 5px 2px rgba(250, 0, 20, 0.4);
}
</style>
<html>
<button type="button" class="button">Click Me!</button>
</html>
Try
-webkit-box-shadow: 0 0 5px 2px rgba(250, 0, 20, 0.4);
-moz-box-shadow:0 0 5px 2px rgba(250, 0, 20, 0.4);
box-shadow: 0 0 5px 2px rgba(250, 0, 20, 0.4);
.button {
font-size: 16px;
position: relative;
top: 20%;
background: #fcffdc;
color: #de204f;
border: none;
border-radius: 3px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
padding: 20px 20px 14px 20px;
}
.button:hover {
background: #fcffdc;
cursor: pointer;
box-shadow: 0 0 20px rgba(250, 0, 20, 0.4);
}
<button class="button">click here</button>
Use box-shadow css as box-shadow: 0 0 20px rgba(250, 0, 20, 0.4);
Related
In my project we needed to style the checkbox element. I have seen that a common aproach is to style the :before element of the associated label instead.
So far I have managed to implement most of it, but I am having an issue with the :before element pushing the first line of the label text to the right.
I am trying to align all the text in the label to the right of the :before element, but so far the second line always starts at the same place than the :before element.
I am not a frontend dev, but I have tried changing padding, margin, left, position, etc. But I am at a loss.
This is how it looks:
I want all the text of the label ot start at the red line.
You can see what I have so far in this Fiddle.
.container-box{
display:block;
max-width:200px;
}
.neat-checkbox {
display: inline;
width:40px;
}
.neat-checkbox input[type=checkbox] {
position: absolute;
top: 0;
left: 0;
margin-left: 0;
cursor: pointer;
opacity: 0;
z-index: 1;
font-size: 10px !important;
display: none;
}
.neat-checkbox label {
margin-left: 0px;
margin-top: 2px;
line-height: 17px !important;
}
.neat-checkbox label:before {
font-family: "FontAwesome";
content: "\f00c";
color: white;
position: relative;
left: -5px;
top: 0px;
outline: none;
cursor: pointer;
display: inline-block;
width: 17px;
height: 17px;
border: 1px solid #ced4da;
border-radius: 3px;
background-color: #fff;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
box-sizing: border-box;
font-size: 11px;
padding-left: 2px;
line-height: 17px;
}
.neat-checkbox input[type=checkbox]:checked + label:before {
background-color: #2bb19e;
border-color: #2bb19e;
color: #fff;
font-family: "FontAwesome";
content: "\f00c";
font-size: 11px;
padding-left: 2px;
line-height: 17px;
}
.neat-checkbox input[type="checkbox"]:focus + label::before {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
<div class="container-box">
<div>
<label>Some other stuff</label>
</div>
<div class="neat-checkbox">
<input type="checkbox" class="checkbox-list" id="checkboxId_25600" name="name_25600" value="25600">
<label for="checkboxId_25600">Label For Checkbox MOre more more</label>
</div>
</div>
Give the label some left padding and position the :before element absolutely within it. EG:
.container-box {
display: block;
max-width: 200px;
}
.neat-checkbox {
display: inline;
width: 40px;
}
.neat-checkbox input[type=checkbox] {
position: absolute;
top: 0;
left: 0;
margin-left: 0;
cursor: pointer;
opacity: 0;
z-index: 1;
font-size: 10px !important;
display: none;
}
.neat-checkbox label {
margin-left: 0px;
margin-top: 2px;
line-height: 17px !important;
display: inline-block; /* make it block-level */
position: relative; /* so that child elements can be positioned relative to it */
padding-left: 25px; /* allow some space for the pseudo checkbox */
}
.neat-checkbox label:before {
font-family: "FontAwesome";
content: "\f00c";
color: white;
left: 0px;
top: 0px;
outline: none;
cursor: pointer;
display: block; /* make it block-level */
position: absolute; /* give an absolute position (defaults to 0,0) */
width: 17px;
height: 17px;
border: 1px solid #ced4da;
border-radius: 3px;
background-color: #fff;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
box-sizing: border-box;
font-size: 11px;
padding-left: 2px;
line-height: 17px;
}
.neat-checkbox input[type=checkbox]:checked+label:before {
background-color: #2bb19e;
border-color: #2bb19e;
color: #fff;
font-family: "FontAwesome";
content: "\f00c";
font-size: 11px;
padding-left: 2px;
line-height: 17px;
}
.neat-checkbox input[type="checkbox"]:focus+label::before {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
<div class="container-box">
<div>
<label>Some other stuff</label>
</div>
<div class="neat-checkbox">
<input type="checkbox" class="checkbox-list" id="checkboxId_25600" name="name_25600" value="25600">
<label for="checkboxId_25600">Label For Checkbox MOre more more</label>
</div>
</div>
The problem is that you are moving the checkbox using position relative, so the original space is preserved but you just move the visual 5px to the left.
You can add a margin-right: -5px if you use left: -5px or remove the left property and just use margin-left: -5px instead.
I'm looking a solution how to change css background color with padding or white color around the checkbox, I tried and play around using margin, padding height and etc, but no luck.
So when user click the checkbox, it would show background color, it's working, but I'd like to have white padding around the checkbox, is it possible?
.checkbox {
margin: 0 0 1em 2em;
}
.checkbox .tag {
color: #595959;
display: block;
float: left;
font-weight: bold;
position: relative;
width: 120px;
}
.checkbox label {
display: inline;
}
.checkbox .input-assumpte {
display: none;
}
.input-assumpte + label:after {
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
display: inline-block;
transition-duration: 0.3s;
width: 16px;
height: 16px;
content: "";
margin-left: 10px;
padding: 5px;
}
.input-assumpte:checked + label:after {
background-color: #0e4caa;
padding: 5px;
}
<div class="checkbox">
<input type="checkbox" class="input-assumpte" id="input-confidencial" />
<label for="input-confidencial">Confidencial</label>
</div>
Exactly what you want is background-clip, easy:
.checkbox {
margin: 0 0 1em 2em;
}
.checkbox .tag {
color: #595959;
display: block;
float: left;
font-weight: bold;
position: relative;
width: 120px;
}
.checkbox label {
display: inline;
}
.checkbox .input-assumpte {
display: none;
}
.input-assumpte + label::after {
background-color: #fafafa;
border: 4px solid #0e4caa;
background-clip: content-box;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
display: inline-block;
transition-duration: 0.3s;
width: 16px;
height: 16px;
content: "";
margin-left: 10px;
padding: 5px;
}
.input-assumpte:checked + label::after {
background-color: #0e4caa;
padding: 5px;
}
<div class="checkbox">
<input type="checkbox" class="input-assumpte" id="input-confidencial" />
<label for="input-confidencial">Confidencial</label>
</div>
Also on JSFiddle.
The background-clip CSS property sets whether an element's background
extends underneath its border box, padding box, or content box.
Just to mention, there is also one more solution for extra border using outline, but it extends the element:
.checkbox {
margin: 0 0 1em 2em;
}
.checkbox .tag {
color: #595959;
display: block;
float: left;
font-weight: bold;
position: relative;
width: 120px;
}
.checkbox label {
display: inline;
}
.checkbox .input-assumpte {
display: none;
}
.input-assumpte + label::after {
background-color: #fafafa;
border: 4px solid #fafafa;
outline: 4px solid #0e4caa;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
display: inline-block;
transition-duration: 0.3s;
width: 16px;
height: 16px;
content: "";
margin-left: 10px;
padding: 5px;
}
.input-assumpte:checked + label::after {
background-color: #0e4caa;
padding: 5px;
}
<div class="checkbox">
<input type="checkbox" class="input-assumpte" id="input-confidencial" />
<label for="input-confidencial">Confidencial</label>
</div>
You can use the CSS box-shadow property:
.checkbox {
margin: 0 0 1em 2em;
}
.checkbox .tag {
color: #595959;
display: block;
float: left;
font-weight: bold;
position: relative;
width: 120px;
}
.checkbox label {
display: inline;
}
.checkbox .input-assumpte {
display: none;
}
.input-assumpte+label:after {
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
display: inline-block;
transition-duration: 0.3s;
width: 16px;
height: 16px;
content: "";
margin-left: 10px;
padding: 5px;
}
.input-assumpte:checked+label:after {
background-color: #0e4caa;
padding: 5px;
box-shadow: inset 0px 0px 0px 4px white
}
<div class="checkbox">
<input type="checkbox" class="input-assumpte" id="input-confidencial" />
<label for="input-confidencial">Confidencial</label>
</div>
inset shadow should be sufficient for this
box-shadow:0 1px 2px rgba(0, 0, 0, 0.05),
inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 0 0 0 2px #0e4caa ,inset 0 0 0 4px white;
Demo
.checkbox {
margin: 0 0 1em 2em;
}
.checkbox .tag {
color: #595959;
display: block;
float: left;
font-weight: bold;
position: relative;
width: 120px;
}
.checkbox label {}
.checkbox .input-assumpte {
display: none;
}
.input-assumpte+label:after {
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
display: inline-block;
transition-duration: 0.3s;
width: 16px;
height: 16px;
content: "";
margin-left: 10px;
padding: 5px;
}
.input-assumpte:checked+label:after {
background-color: #0e4caa;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 0 0 0 2px #0e4caa, inset 0 0 0 4px white;
padding: 5px;
}
<div class="checkbox">
<input type="checkbox" class="input-assumpte" id="input-confidencial" />
<label for="input-confidencial">Confidencial</label>
</div>
outline with a negative offset could also work:
outline: solid white 2px;
outline-offset: -5px;
.checkbox {
margin: 0 0 1em 2em;
}
.checkbox .tag {
color: #595959;
display: block;
float: left;
font-weight: bold;
position: relative;
width: 120px;
}
.checkbox label {}
.checkbox .input-assumpte {
display: none;
}
.input-assumpte+label:after {
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
display: inline-block;
transition-duration: 0.3s;
width: 16px;
height: 16px;
content: "";
margin-left: 10px;
padding: 5px;
}
.input-assumpte:checked+label:after {
background-color: #0e4caa;
outline: solid white 2px;
outline-offset: -5px;
padding: 5px;
}
<div class="checkbox">
<input type="checkbox" class="input-assumpte" id="input-confidencial" />
<label for="input-confidencial">Confidencial</label>
</div>
I have a link designed as button and and a real button.
For some reason the text of both have a different font-weight, despite of the same font-weight and font-size. How can I fix this?
The designed pseudo button:
.btn {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
outline: 0;
border: 0;
color: #ffffff;
text-decoration: none;
background-color: #ED7004;
font-size: 14px;
font-weight: 100;
padding: 5px 10px 5px 10px;
margin-bottom: 5px;
line-height: normal;
text-align: center;
vertical-align: middle;
cursor: pointer;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
-moz-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
}
The real button:
input[type="button"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
outline: 0;
border: 0;
color: #ffffff;
text-decoration: none;
background-color: #ED7004;
font-size: 14px;
font-weight: 100;
padding: 5px 10px 5px 10px;
margin-bottom: 5px;
line-height: normal;
text-align: center;
vertical-align: middle;
cursor: pointer;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
-moz-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
}
Thanx!
Are you sure both use the exact same font?
With Arial both look pretty much the same to me:
HTML:
<input type="button" value="Input Button">
<div class="btn">Button Class</div>
CSS:
.btn {
font-family: Arial;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
outline: 0;
border: 0;
color: #ffffff;
text-decoration: none;
background-color: #ED7004;
font-size: 14px;
font-weight: 100;
padding: 5px 10px 5px 10px;
margin-bottom: 5px;
line-height: normal;
text-align: center;
vertical-align: middle;
cursor: pointer;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
-moz-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
}
input[type="button"] {
font-family: Arial;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
outline: 0;
border: 0;
color: #ffffff;
text-decoration: none;
background-color: #ED7004;
font-size: 14px;
font-weight: 100;
padding: 5px 10px 5px 10px;
margin-bottom: 5px;
line-height: normal;
text-align: center;
vertical-align: middle;
cursor: pointer;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
-moz-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
}
Codepen demo
Though there are still visible differences between browsers. If you want a light font for the button (and the same look in all browsers) it may be better to use an appropriate (web) font instead of font-weight: 100
-webkit-font-smoothing: antialiased;
font-rendering: geometricPrecision;
I have a button with a style, and I want to change it to a new style without removing the existing style. So this is my currently button I have: http://jsfiddle.net/XaXg2/1/
HTML: <a id="login-button" class="s3d blue">Search</a>
CSS: #login-button { float: left; height: 28px; line-height: 28px; width: 100px; font-size: 15px; font-weight: 700; color: #FFF; border-radius: 4px; background: #AC3; text-align: center; cursor: pointer; }
I want to apply this new style without removing "login-button" style.
HTML: New Search
CSS:
a.s3d {
clear: both;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-webkit-box-shadow:0 4px 5px rgba(0,0,0,.3);
-moz-box-shadow:0 4px 5px rgba(0,0,0,.3);
box-shadow:0 4px 5px rgba(0,0,0,.3);
display: inline-block !important;
font: 700 13px/36px 'Arial', Helvetica, Clean, sans-serif;
height: 26px;
margin: 0 0 10px;
padding: 0 10px 11px;
position: relative;
text-decoration: none;
text-shadow: 0 1px 1px rgba(255,255,255,.35);
width: 125px; }
a.blue {
background: #65acc8;
background: -webkit-gradient(linear, 0 0, 0 0, from(#65acc8), to(#4586ae));
background: -moz-linear-gradient(#65acc8, #4586ae);
background: linear-gradient(#65acc8, #4586ae);
border-top: 1px solid #a1cdde;
color: rgba(25,45,55,.9); }
a.blue:active {
background: #4586ae;
background: -webkit-gradient(linear, 0 0, 0 0, from(#4586ae), to(#65acc8));
background: -moz-linear-gradient(#4586ae, #65acc8);
background: linear-gradient(#4586ae, #65acc8); }
Use CSS specificity to override your original CSS. Add #login-button to your selectors:
jsFiddle example
#login-button {
float: left;
height: 28px;
line-height: 28px;
width: 100px;
font-size: 15px;
font-weight: 700;
color: #FFF;
border-radius: 4px;
background: #AC3;
text-align: center;
cursor: pointer;
}
a#login-button.s3d {
clear: both;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-webkit-box-shadow:0 4px 5px rgba(0, 0, 0, .3);
-moz-box-shadow:0 4px 5px rgba(0, 0, 0, .3);
box-shadow:0 4px 5px rgba(0, 0, 0, .3);
display: inline-block !important;
font: 700 13px/36px'Arial', Helvetica, Clean, sans-serif;
height: 26px;
margin: 0 0 10px;
padding: 0 10px 11px;
position: relative;
text-decoration: none;
text-shadow: 0 1px 1px rgba(255, 255, 255, .35);
width: 125px;
}
a#login-button.blue {
background: #65acc8;
background: -webkit-gradient(linear, 0 0, 0 0, from(#65acc8), to(#4586ae));
background: -moz-linear-gradient(#65acc8, #4586ae);
background: linear-gradient(#65acc8, #4586ae);
border-top: 1px solid #a1cdde;
color: rgba(25, 45, 55, .9);
}
a#login-button.blue:active {
background: #4586ae;
background: -webkit-gradient(linear, 0 0, 0 0, from(#4586ae), to(#65acc8));
background: -moz-linear-gradient(#4586ae, #65acc8);
background: linear-gradient(#4586ae, #65acc8);
}
I have a CSS button that looks like this:
that is formed from this CSS code:
.Button{
color: #333;
border: 1px solid orange;
border-bottom: 5px solid orange;
background-color: #fff;
font-size: 12px;
margin: 5px;
padding: 1px 7px 1px 7px;
display: inline-block;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
top: 0px;
}
.Button:hover{
cursor: hand;
cursor: pointer;
}
.Button:active{
border-bottom: 3px solid #999;
top: 3px;
}
This is what I am trying to make it look like (but I can't figure out how to do it):
Please pardon my drawing skills. I just want to extend the orange border on the left so it looks 3D. Thanks!
Here is a fiddle for a 3d button I have used in places. It is animated with css to have an active and hover state
fiddle
.btn-big {
background-color: #474EDD;
background-image: -webkit-linear-gradient(283deg, rgba(255, 255, 255, 0.1) 50%, transparent 55%),-webkit-linear-gradient(top, rgba(255, 255, 255, 0.15), transparent);
border-radius: 6px;
box-shadow: 0 0 0 1px #163772 inset,0 0 0 2px rgba(255, 255, 255, 0.15) inset,0 4px 0 0 #333797,0 4px 0 1px rgba(0, 0, 0, 0.4),0 4px 4px 1px rgba(0, 0, 0, 0.5);
color: white !important;
display: block;
font-family: "Lucida Grande", Arial, sans-serif;
font-size: 20px;
font-weight: bold;
height: 61px;
letter-spacing: -1px;
line-height: 61px;
margin: 50px;
position: relative;
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
text-decoration: none !important;
-webkit-transition: all .2s linear;
width: 186px;
}
.btn-big:active {
background-color: #474EDD;
top: 4px;
box-shadow: 0 0 0 1px #163772 inset,0 0 0 2px rgba(255, 255, 255, 0.15) inset,0 0 0 0 #333797,0 0 0 1px rgba(0, 0, 0, 0.4),0 0px 8px 1px rgba(0, 0, 0, 0.5);
}
.btn-big:hover {
background-color: #5158E0;
poisiton: relative;
top: -1px;
box-shadow: 0 0 0 1px #163772 inset,0 0 0 2px rgba(255, 255, 255, 0.15) inset,0 5px 0 0 #333797,0 5px 0 1px rgba(0, 0, 0, 0.4),0 5px 8px 1px rgba(0, 0, 0, 0.5);
}
I hope that helps!
Would you like to try this way:
http://cssdeck.com/labs/fancy-3d-button
a {
position: relative;
color: rgba(255, 255, 255, 1);
text-decoration: none;
background-color: rgba(219, 87, 5, 1);
font-family: 'Yanone Kaffeesatz';
font-weight: 700;
font-size: 3em;
display: block;
padding: 4px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 9px 0px rgba(219, 31, 5, 1), 0px 9px 25px rgba(0, 0, 0, .7);
-moz-box-shadow: 0px 9px 0px rgba(219, 31, 5, 1), 0px 9px 25px rgba(0, 0, 0, .7);
box-shadow: 0px 9px 0px rgba(219, 31, 5, 1), 0px 9px 25px rgba(0, 0, 0, .7);
margin: 100px auto;
width: 160px;
text-align: center;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
}
a:active {
-webkit-box-shadow: 0px 3px 0px rgba(219, 31, 5, 1), 0px 3px 6px rgba(0, 0, 0, .9);
-moz-box-shadow: 0px 3px 0px rgba(219, 31, 5, 1), 0px 3px 6px rgba(0, 0, 0, .9);
box-shadow: 0px 3px 0px rgba(219, 31, 5, 1), 0px 3px 6px rgba(0, 0, 0, .9);
position: relative;
top: 6px;
}
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700' rel='stylesheet' type='text/css'>
Push me!
This is close, but not quite perfect.
Using box-shadow & border:
.Button {
color: #333;
box-shadow: -3px 3px orange, -2px 2px orange, -1px 1px orange;
border: 1px solid orange;
}
http://jsfiddle.net/grYTZ/3/
Try This One you can resize it of course
<html>
<head>
<style>
.button {
background: black;
border-style: outset;
border-width: 4px;
border-color: white;
border-radius: 8px;
color: white;
padding: 8px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
min-width:500px;
min-height: 100px;
}
.button:hover{
border-style: outset;
border-width: 2px;
box-shadow: none;
background: black;
</style>
</head>
<body>
Link Button
</body>
</html>
You can do this using this example from the perspective page on MDN. You can change the view by setting the perspective-origin in .button-container. My example is also animated so that clicking on the button will show motion. You can change that using the transition function in .side.
JSFiddle
<div class="container">
<div class="button-container">
<div class="bottom side"></div>
<div class="left side"></div>
<div class="right side"></div>
<div class="top side"></div>
<button class="button side" type="button">Click Me</button>
</div>
</div>
.button-container {
--dimension: 100px;
--adjustment: 0px;
--red-accent: #B11807;
--red-dark: #710F05;
--red: #E31D09;
height: 100%;
perspective: 700px;
perspective-origin: 150% 150%;
transform-style: preserve-3d;
width: 100%;
}
.button-container:active {
--adjustment: 100px;
}
.side {
border: none;
box-sizing: border-box;
display: block;
height: calc(var(--dimension) - var(--adjustment));
position: absolute;
transition: 0.4s ease-out;
width: calc(var(--dimension) - var(--adjustment));
}
.bottom {
background: var(--red-accent);
transform: rotateX(-90deg) translateZ(calc(var(--dimension) / 2 + var(--adjustment) / 2));
width: var(--dimension);
}
.button {
background-color: var(--red);
color: #FFFFFF;
height: var(--dimension);
transform: translateZ(calc(var(--dimension) / 2 - var(--adjustment) / 2));
width: var(--dimension);
}
.left {
background: var(--red-dark);
height: var(--dimension);
transform: rotateY(-90deg) translateZ(calc(var(--dimension) / 2 - var(--adjustment) / 2));
}
.right {
background: var(--red-dark);
height: var(--dimension);
transform: rotateY(90deg) translateZ(calc(var(--dimension) / 2 + var(--adjustment) / 2));
}
.top {
background: var(--red-accent);
transform: rotateX(90deg) translateZ(calc(var(--dimension) / 2 - var(--adjustment) / 2));
width: var(--dimension);
}
.container {
box-sizing: border-box;
padding: 100px;
height: 300px;
width: 300px;
}