I would like simply an effect like is shown with the Sign in / register buttons on this website:
http://css-tricks.com/forums/entry/register
I've tried "Inspect Element" on this page but can't figure out how its being achieved.
i.e. hover over them and they change subtly. Click them and they appear to be "pressed in" for as long as you hold the mouse key down. Release mouse key and they pop back out.
Using a javascript solution at the moment but not very happy with it. Would prefer to leave javascript out. Far too much effort trying to get it to work in Chrome as well as IE.
I suppose you mean the active state. Fiddle.
.button, #rcp_submit {
display: inline-block;
border: 0;
border-radius: 0;
outline: 0;
background: #4e68c7;
box-shadow: 1px 0px 1px #203891, 0px 1px 1px #3852b1, 2px 1px 1px #203891, 1px 2px 1px #3852b1, 3px 2px 1px #203891, 2px 3px 1px #3852b1, 4px 3px 1px #203891, 3px 4px 1px #3852b1, 5px 4px 1px #203891, 4px 5px 1px #3852b1, 6px 5px 1px #203891;
color: white;
white-space: nowrap;
font-family:'Gotham Rounded A', 'Gotham Rounded B', "proxima-nova-soft", sans-serif;
padding: 9px 16px;
line-height: 1.4;
position: relative;
top: -5px;
}
.button:hover, .button:focus, #rcp_submit:hover, #rcp_submit:focus {
color: white;
background: #3d57b4;
}
.button:active, #rcp_submit:active {
box-shadow: 1px 0px 1px #203891, 0px 1px 1px #3852b1, 2px 1px 1px #203891, 1px 2px 1px #3852b1, 3px 2px 1px #203891;
-webkit-transform: translate(3px, 3px);
-moz-transform: translate(3px, 3px);
-ms-transform: translate(3px, 3px);
-o-transform: translate(3px, 3px);
transform: translate(3px, 3px);
}
Related
I know it doesn't by default, but I'm trying to force it to.
I'm building a button-like anchor that has a solid box-shadow (no blur) to create the illusion of depth, and when hovered it reacts.
Only problem is that it reacts only when the cursor is above the anchor itself, and since it moves a few pixels when hovered, depending on how close is the cursor to the edge, it causes the anchor to flicker.
Is it possible to order the shadow to be included in the element's total size? And I know it's kind of bothersome that a button misbehaves in this way, but is it terrible coding? I realize it's kind of a design question, but I'm after the code, really.
TLDR: my anchor flickers when hovered too close to the edge. alternatives?
The code is working, but I'll paste it anyway.
Here's the code:
.btn {
display: inline-block;
width: 50%;
margin-left: 25%;
/*center*/
padding: 10px 20px;
border-radius: 20px;
background-color: #71e2ff;
box-shadow: 0 1px #34d6ff, 0 2px #34d6ff, 0 3px #34d6ff, 0 4px #34d6ff;
}
.btn:hover {
box-shadow: 0 1px #34d6ff, 0 2px #34d6ff, 0 3px #34d6ff, 0 4px #34d6ff, 0 5px #34d6ff, 0 6px #34d6ff;
transform: translateY(-2px);
}
.btn:active {
box-shadow: 0 1px #34d6ff, 0 2px #34d6ff;
transform: translateY(0);
}
<a class="btn" href="#">suscribe</a>
EDIT:
Thanks Paulie_D, worked like a charm! Pseudo element with absolute position stretched in all directions was the way to go.
No you can't include a box-shadow in the height/width calculations but you can increase the click / hover area by using a pseudo-element which is sized to include the box-shadow.
From CSS-Tricks
button {
border: 0;
border-radius: 0;
outline: 0;
background: #4e68c7;
box-shadow: 1px 0px 1px #203891, 0px 1px 1px #3852b1, 2px 1px 1px #203891, 1px 2px 1px #3852b1, 3px 2px 1px #203891, 2px 3px 1px #3852b1, 4px 3px 1px #203891, 3px 4px 1px #3852b1, 5px 4px 1px #203891, 4px 5px 1px #3852b1, 6px 5px 1px #203891;
color: white;
white-space: nowrap;
padding: 9px 16px;
position: relative;
}
button:hover,
button:focus {
background: #3d57b4;
}
button:hover,
button:active {
box-shadow: 1px 0px 1px #203891, 0px 1px 1px #3852b1, 2px 1px 1px #203891, 1px 2px 1px #3852b1, 3px 2px 1px #203891;
-moz-transform: translate(3px, 3px);
-ms-transform: translate(3px, 3px);
-webkit-transform: translate(3px, 3px);
transform: translate(3px, 3px);
}
button:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: -5px;
bottom: -5px;
outline: 1px solid red;
/* for demo */
}
button:hover::after,
button:active:after {
top: -3px;
left: -3px;
right: -2px;
bottom: -2px;
}
body {
padding: 30px;
}
#message {
padding: 10px 0;
}
<button>A Button</button>
it seem impossible to apply shadow on my css triangle? other example work because their markup is different.
div:before{
content: "";
width: 0;
height: 0;
position: relative;
top: 15px;
border-style: solid;
border-width: 12px 12px 0 12px;
border-color: #000 transparent transparent transparent;
-webkit-transform: rotate(270deg);
-webkit-transform-origin: 50% 50%;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
box-shadow: 0 1px 2px #000;
}
http://jsfiddle.net/2dmJp/2/
You can use filter:
div {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
-webkit-filter: drop-shadow(0 1px 2px #000);
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}
http://jsfiddle.net/Rn37T/1/
It isn't supported in IE9 and earlier.
cross-browser solution using transform rotate:
codepen.io/ryanmcnz/pen/JDLhu
i'm new to gnome-shell modding. i've been struggling to make some modification to my gnome-shell theme. i like the concept of old-ish, simple *box desktop. so i tried to modified my gnome-shell to looks like one.
i tried to make some bevel on my gnome-shell, and it turned out to be like this. i don't know what's wrong with my code, i tried many combination.
http://i.stack.imgur.com/E0aRq.png
i want to make at least like this one, is it possible?
http://i.stack.imgur.com/gFuL1.png
here's my code
.panel-button {
-natural-hpadding: 12px;
-minimum-hpadding: 8px;
font-weight: bold;
color: #4A4A4A;
border: 3px solid #000000;
border-top: 3px solid transparent;
border-bottom: 5px solid #000000;
box-shadow:
1.5px 1.5px 0px rgba(0,0,0,1), /*bottom external highlight*/
0px 0px 3px #666, /*top external shadow*/
inset 0 -1px 1px #000000, /*bottom internal shadow*/
-1px -1px 1px rgba(255,255,255,1); /*top internal highlight*/;
}
sorry for my bad English.
I dont know if there is something special to gnome shell when it comes to styling but expect this to work.
JSFiddle
button {
height: 25px;
background: #ddd;
border-bottom: solid 1px #aaa;
border-right: solid 1px #aaa;
border-top: solid 1px #fff;
border-left: solid 1px #fff;
}
button.active {
border-bottom: solid 1px #fff;
border-right: solid 1px #fff;
border-top: solid 1px #aaa;
border-left: solid 1px #aaa;
}
I have this button that appears fine on desktop and mobile, but when viewed on an android tablet there is this white background around the corners where the transparency for the button would be. Has anyone encountered this?
button.css3button {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #ffffff;
padding: 10px 20px;
background: none;
background: -moz-linear-gradient(top,#41f0ed 0%,#278a88);
background: -webkit-gradient(linear, left top, left bottom, from(#41f0ed), to(#278a88));
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
border: 0px solid #000000;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 1px 1px rgba(255,255,255,1);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 1px 1px rgba(255,255,255,1);
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 1px 1px rgba(255,255,255,1);
text-shadow:
0px -1px 0px rgba(000,000,000,0.2),
0px 1px 0px rgba(255,255,255,0.3);
}
have you tried
background:none;
to
background: transparent;
Try removing box-shadow or gradient. I imagine one of them is the culprit. If it is, you can do a conditional check for and Android tablet, and exclude that from your CSS.
var userAgent = window.navigator.userAgent.toLowerCase();
if ( /android/.test( userAgent ) && !/mobile/.test( userAgent ) ) {
//it's an android tablet, remove box-shadow
};
I have the following css:
fieldset ul li input {
width: 96%;
margin: 0;
padding: 6px;
font-size: 13px;
border: 1px solid #CCC;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 2px 2px white, inset 0 1px 3px #EEE;
-webkit-box-shadow: 0 2px 2px white, inset 0 1px 3px #EEE;
box-shadow: 0 2px 2px white, inset 0 1px 3px #EEE;
}
Which is working under Firefox and Chrome. However in IE9, when I insert some text, I can't see it completely. As you can see is hidden in the half of it:
Either increase the height or the padding.
input {
padding: 10px;
}