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;
}
Related
I have a range slider styled in Chrome.. I'm having major issues trying to get it to look the same in IE11 and firefox.. I've tried following some guides on how to make it compatible using the ms- and moz- for the webkit tags but it's still not formatting the same. I understand it may be a little different but its just nowhere near the same result. here's the code so far.. basically the range slider needs to be formatted same as the button above it.... any help much appreciated.
.switch {
position: relative;
display: block;
vertical-align: top;
width: 100px;
height: 30px;
padding: 3px;
margin: 0 10px 10px 0;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
border-radius: 18px;
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
box-sizing:content-box;
}
.switch-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
box-sizing:content-box;
}
.switch-label {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
box-sizing:content-box;
}
.switch-label_1 {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
box-sizing:content-box;
}
.switch-label:before, .switch-label:after, .switch-label_1:before, .switch-label_1:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
box-sizing:content-box;
}
.switch-label:before, .switch-label_1:before {
content: attr(data-off);
right: 11px;
color: #aaaaaa;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after, .switch-label_1:after {
content: attr(data-on);
left: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch-input:checked ~ .switch-label {
background: #86b692;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
opacity: 1;
}
.switch-input:checked ~ .switch-label_1 {
background: #a9d2d5;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label_1:before {
opacity: 0;
}
.switch-input:checked ~ .switch-label_1:after {
opacity: 1;
}
.switch-handle {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
border-radius: 100%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
left: 74px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
/* Transition
========================== */
.switch-label, .switch-label_1, .switch-handle {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
}
.range {
display: block;
vertical-align: top;
width: 300px;
height: 30px;
padding: 3px;
margin: 0 10px 10px 0;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
border-radius: 18px;
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
box-sizing:content-box;
}
.range-frame{
position: relative;
display: block;
height: inherit;
font-size: 10px;
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
box-sizing:content-box;
}
input[type=range] {
-webkit-appearance: none;
margin: 10px 0;
width: 100%;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 35px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background: lightgray;
border-radius: 25px;
border: 0px solid #000101;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 35px;
width: 39px;
border-radius: 35px;
background: silver;
cursor: pointer;
-webkit-appearance: none;
margin-top: -1px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: lightgray;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 35px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background: lightgray;
border-radius: 25px;
border: 0px solid #000101;
}
input[type=range]::-moz-range-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 35px;
width: 39px;
border-radius: 35px;
background: silver;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 35px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
border-width: 39px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: lightgray;
border: 0px solid #000101;
border-radius: 35px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
background: transparent;
border: 0px solid #000101;
border-radius: 35px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 35px;
width: 39px;
border-radius: 35px;
background: silver;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: lightgray;
}
input[type=range]:focus::-ms-fill-upper {
background:lightgray;
}
.output-value{
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 10px;
color: #aaaaaa;
pointer-events: none;
}
<html>
<head>
<title>Roland</title>
<link rel="stylesheet" href="range.css" />
<link rel="stylesheet" href="switch.css">
</head>
<body>
<form>
<label class="switch">
<input class="switch-input" type="checkbox" Filter="PL" Column="1">
<span class="switch-label" data-on="PL" data-off="PL"></span>
<span class="switch-handle"></span>
</label>
<label class="range">
<span class="range-frame">
<span for fader class="output-value" id="rangevalue">0 Nm</span>
<input class="range-input" id="fader" type="range" min="0" max="150" step="1" value="0" onchange="outputUpdate(value)">
</span>
</label>
</form>
<script>
function outputUpdate(vol) {
document.getElementById('rangevalue').innerHTML=vol + ' Nm';
}
</script>
</body>
</html>
here's what it should look like on all browsers -
thanks
C
The input type range is quite customizable. Unfortunately, each browser has its own way and thus we have to write longer codes than expected. Than also you will not get the exact similar results. The result will look little bit different from other browsers.
You can refer an example below which I try to customize to make it looks like your range slider. I tested it with various browsers and it looks almost similar in most of the browsers.
<!DOCTYPE html>
<html>
<head>
<style>
input[type=range] {
-webkit-appearance: none;
margin: 10px 0;
width: 100%;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 35px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background: lightgray;
border-radius: 25px;
border: 0px solid #000101;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 35px;
width: 39px;
border-radius: 35px;
background: silver;
cursor: pointer;
-webkit-appearance: none;
margin-top: -1px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: lightgray;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 35px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background: lightgray;
border-radius: 25px;
border: 0px solid #000101;
}
input[type=range]::-moz-range-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 35px;
width: 39px;
border-radius: 35px;
background: silver;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 35px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
border-width: 39px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: lightgray;
border: 0px solid #000101;
border-radius: 35px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
background: lightgray;
border: 0px solid #000101;
border-radius: 35px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 35px;
width: 39px;
border-radius: 35px;
background: silver;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: lightgray;
}
input[type=range]:focus::-ms-fill-upper {
background:lightgray;
}
body {
padding: 30px;
}
</style>
</head>
<body>
<input type="range">
</body>
</html>
Output in various browsers:
Reference:
(1) Codepen example
(2) Styling Cross-Browser Compatible Range Inputs with CSS
Further, you can try to modify it based on your own requirement or use it as a reference for making the changes in your own code.
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);
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);
}
This works fine under Chrome 34.0.1847, but not on Firefox 29.0.1
Replicated issue on JSFiddle: http://jsfiddle.net/3a942/1/
NOTE: Enter any text, press submit then click run again and attempt to enter the same text again to see the tool-tip come up.
Full CSS For the Login Popup window
.overlay {
background-color: rgba(0, 0, 0, 0.6);
bottom: 0;
cursor: default;
left: 0;
opacity: 0;
position: fixed;
right: 0;
top: 0;
visibility: hidden;
z-index: 1;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-ms-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
.overlay:target {
visibility: visible;
opacity: 0.99;
}
.popup {
width: 510px;
background-color: #fff;
border: 1px solid #fff;
display: inline-block;
left: 50%; color:#666;
opacity: 0;
padding: 25px;
position: fixed;
top: 50%;
visibility: hidden;
z-index: 10;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-webkit-transition: opacity .5s, top .5s;
-moz-transition: opacity .5s, top .5s;
-ms-transition: opacity .5s, top .5s;
-o-transition: opacity .5s, top .5s;
transition: opacity .5s, top .5s;
}
.overlay:target+.popup {
top: 50%;
opacity: 1;
visibility: visible;
}
.close {
background-color: rgba(0, 0, 0, 0.8);
height: 32px;
line-height: 32px;
position: absolute;
right: 0;
text-align: center;
text-decoration: none;
top: -15px;
width: 33px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
border-radius: 8px;
}
.close:before {
color: rgba(255, 255, 255, 0.9);
content: "X";
font-size: 24px;
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
}
.close:hover {
background-color: rgba(64, 128, 128, 0.8);
}
.popup label {
display: inline;
text-align: left;
}
.popup input[type="text"], .popup input[type="password"] {
margin: 0;
padding: 4px; background:#d8f6fd;
border: 2px solid #66c8de;
-moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.popup input[type="text"]:hover, .popup input[type="password"]:hover {
background: #fff
}
.popup input[type=button]{
cursor: pointer;
font: bold 15px Arial, Helvetica;
color: #fafafa;
width: 150px;
text-transform: uppercase;
background-color: #0483a0;
background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0));
background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0);
background-image: -moz-linear-gradient(top, #31b2c3, #0483a0);
background-image: -ms-linear-gradient(top, #31b2c3, #0483a0);
background-image: -o-linear-gradient(top, #31b2c3, #0483a0);
background-image: linear-gradient(top, #31b2c3, #0483a0);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding:6px;
text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
}
.popup .validation-error {
color: #DC143C;
font-weight: bold;
}
Any idea on what could be causing this misalignment? I played with some of the properties and was able to get the tool-tip to align but it meant me moving the window down to that location.
It`s beacuse of the translation property. Try centering the popup by using another method ( http://www.sitepoint.com/css-center-position-absolute-div/ )
I am trying to have a image on CSS text button. If I increase font-size to 26 px, image appear properly.I want to keep the font-size at 20px but fit image properly.
a.button {
border: 1px solid #979797;
}
a.button.icon {
padding-left: 11px;
}
a.button.icon span{
padding-left: 48px;
background: url(../img/gmail2.png) no-repeat;
}
a.button.icon.chat span {
background-position: 0px -48;
}
a.button {
background-image: -moz-linear-gradient(top, #ffffff, #dbdbdb);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #ffffff),color-stop(1, #dbdbdb));
filter: progid:DXImageTransform.Microsoft.gradient
(startColorStr='#ffffff', EndColorStr='#dbdbdb');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
(startColorStr='#ffffff', EndColorStr='#dbdbdb')";
border: 1px solid #fff;
-moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
padding: 5px 5px;
text-decoration: none;
text-shadow: #fff 0 1px 0;
float: left;
margin-right: 15px;
margin-bottom: 15px;
display: block;
color: #597390;
line-height: 38px;
font-size: 20px;
font-weight: bold;
}
What about setting an specific height for a.button.icon span ?