Can someone help me on how to have a fixed width for all buttons using css. Please find the jsFiddle link for the same. I have tried my best but unable to get a clue. Thanks in advance.
HTML:
<div id="container">
<div class="button-row width">
Menu Organizer
</div>
<div class="button-row">
Place Order
</div>
<div class="button-row-submenu width">
Category
</div>
<div class="button-row-submenu">
Building
</div>
<div class="button-row">
User Preference
</div>
<div class="button-row">
Ok
</div>
</div>
CSS:
/* some styles */
div#container {
width: 800px;
margin: 50px auto;
}
div.button-row {
margin: 20px 0;
text-align: left;
}
/* button */
.button {
font-family: Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: bold;
width: 200px;
color: #FFFFFF;
padding: 6px 50px;
margin: 0 20px;
text-shadow: 2px 2px 1px #595959;
filter: dropshadow(color=#595959, offx=1, offy=1);
text-decoration: none;
}
/* button shapes */
.rounded {
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
/* button colors */
.red {
border: solid 1px #720000;
background-color: #c72a2a;
background: -moz-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);
background: -webkit-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);
background: -o-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);
background: -ms-linear-gradient(top, #c72a2a 0% ,#9e0e0e 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9e0e0e', endColorstr='#9e0e0e',GradientType=0 );
background: linear-gradient(top, #c72a2a 0% ,#9e0e0e 100%);
-webkit-box-shadow: 0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF;
-moz-box-shadow: 0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF;
box-shadow: 0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF;
}
.red:hover {
background-color: #b52f2f;
background: -moz-linear-gradient(top, #b52f2f 0%, #910b0b 100%);
background: -webkit-linear-gradient(top, #b52f2f 0%, #910b0b 100%);
background: -o-linear-gradient(top, #b52f2f 0%, #910b0b 100%);
background: -ms-linear-gradient(top, #b52f2f 0% ,#910b0b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#910b0b', endColorstr='#910b0b',GradientType=0 );
background: linear-gradient(top, #b52f2f 0% ,#910b0b 100%);
}
.red:active {
background-color: #8f2222;
background: -moz-linear-gradient(top, #8f2222 0%, #660808 100%);
background: -webkit-linear-gradient(top, #8f2222 0%, #660808 100%);
background: -o-linear-gradient(top, #8f2222 0%, #660808 100%);
background: -ms-linear-gradient(top, #8f2222 0% ,#660808 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#660808', endColorstr='#660808',GradientType=0 );
background: linear-gradient(top, #8f2222 0% ,#660808 100%);
}
/* button effects */
.effect-3 {
transition: border-radius 1s;
-webkit-transition: border-radius 1s;
-moz-transition: border-radius 1s;
-o-transition: border-radius 1s;
-ms-transition: border-radius 1s;
}
.effect-3:hover {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.width{
width: 550px;
}
Can someone help me on how to have a fixed width for all buttons using css.
You can't set widths on inline elements. Solution: give them display:inline-block. Inline-blocks have widths.
/* some styles */
body {
background: url(../images/bg1.jpg) repeat;
}
div#container {
width: 800px;
margin: 50px auto;
}
div.button-row {
margin: 20px 0;
text-align: left;
}
div.button-row-submenu {
margin: 15px 50px;
text-align: left;
}
/* button */
.button {
display: inline-block;
font-family: Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: bold;
width: 200px;
color: #FFFFFF;
padding: 6px 50px;
margin: 0 20px;
text-shadow: 2px 2px 1px #595959;
filter: dropshadow(color=#595959, offx=1, offy=1);
text-decoration: none;
}
.subbutton {
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: bold;
color: #FFFFFF;
padding: 5px 30px;
margin: 0 20px;
text-shadow: 2px 2px 1px #595959;
filter: dropshadow(color=#595959, offx=1, offy=1);
text-decoration: none;
}
/* button shapes */
.rounded {
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
.shape-3 {
-webkit-border-radius: 40px 40px 5px 5px;
border-radius: 40px 40px 5px 5px;
-moz-border-radius-topleft: 40px;
-moz-border-radius-topright: 40px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
}
.shape-4 {
-webkit-border-radius: 5px 5px 40px 40px;
border-radius: 5px 5px 40px 40px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomleft: 40px;
-moz-border-radius-bottomright: 40px;
}
/* button colors */
.red {
border: solid 1px #720000;
background-color: #c72a2a;
background: -moz-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);
background: -webkit-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);
background: -o-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);
background: -ms-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#9e0e0e', endColorstr='#9e0e0e', GradientType=0);
background: linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);
-webkit-box-shadow: 0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF;
-moz-box-shadow: 0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF;
box-shadow: 0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF;
}
.red:hover {
background-color: #b52f2f;
background: -moz-linear-gradient(top, #b52f2f 0%, #910b0b 100%);
background: -webkit-linear-gradient(top, #b52f2f 0%, #910b0b 100%);
background: -o-linear-gradient(top, #b52f2f 0%, #910b0b 100%);
background: -ms-linear-gradient(top, #b52f2f 0%, #910b0b 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#910b0b', endColorstr='#910b0b', GradientType=0);
background: linear-gradient(top, #b52f2f 0%, #910b0b 100%);
}
.red:active {
background-color: #8f2222;
background: -moz-linear-gradient(top, #8f2222 0%, #660808 100%);
background: -webkit-linear-gradient(top, #8f2222 0%, #660808 100%);
background: -o-linear-gradient(top, #8f2222 0%, #660808 100%);
background: -ms-linear-gradient(top, #8f2222 0%, #660808 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#660808', endColorstr='#660808', GradientType=0);
background: linear-gradient(top, #8f2222 0%, #660808 100%);
}
/* button effects */
.effect-3 {
transition: border-radius 1s;
-webkit-transition: border-radius 1s;
-moz-transition: border-radius 1s;
-o-transition: border-radius 1s;
-ms-transition: border-radius 1s;
}
.effect-3:hover {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.width {
width: 550px;
}
<div id="container">
<div class="button-row width">
Menu Organizer
</div>
<div class="button-row">
Place Order
</div>
<div class="button-row-submenu width">
Category
</div>
<div class="button-row-submenu">
Building
</div>
<div class="button-row">
User Preference
</div>
<div class="button-row">
Ok
</div>
</div>
Related
I have a semi-round button. But I don't know how to bend it for my semi-round button in it's border.
.semi-circle {
display: inline-block;
padding: 9px 16px;
border-radius: 999px !important;
text-align: center;
/*border: 10px solid transparent;*/
/* -moz-border-image: -moz-linear-gradient(right, #FC913A 0%, #FF4E50 100%);
-webkit-border-image: -webkit-linear-gradient(right, #FC913A 0%, #FF4E50 100%);
border-image: linear-gradient(to left, #FC913A 0%, #FF4E50 100%);*/
/*border-image-slice: 1;*/
border: linear-gradient(to right, green 0%, blue 100%);
/*background-image: linear-gradient(to left, #FC913A 0%, #FF4E50 100%);*/
background-image: -o-linear-gradient(to left, #FC913A 0%, #FF4E50 100%);*/
background-image: -moz-linear-gradient(to left, #FC913A 0%, #FF4E50 100%);*/
background-image: -webkit-linear-gradient(to left, #FC913A 0%, #FF4E50 100%);*/
background-image: -ms-linear-gradient(to left, #FC913A 0%, #FF4E50 100%);*/
*/
}
Forgive me for not being able to embed the image because of lack of reputation. Thx for the stack overflow community for its great service.
Here is solution. It works fine in webkit. In other browsers text color is solid.
HTML
<button data-text="Round button"></button>
<button class="active" data-text="Active round button"></button>
CSS
body {
background: #384041;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
button {
display: inline-block;
border: none;
outline: none;
appearance: none;
background: red;
position: relative;
z-index: 3;
height: 60px;
border-radius: 30px;
padding: 0 21px;
font-size: 21px;
box-shadow: -1px -1px 1px 0 black;
background: #4f4f4f;
}
button:before {
content: attr(data-text);
min-width: 144px;
z-index: -1;
border-radius: 27px;
color: #4f4f4f;
}
#media screen and (-webkit-min-device-pixel-ratio:0) { button:before {
background: #4f4f4f;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}}
button:after {
content: '';
position: absolute;
left: 3px;
right: 3px;
top: 3px;
bottom: 3px;
z-index: -2;
border-radius: 30px;
background: #151515;
}
button:hover {
cursor: pointer;
background: linear-gradient(to right, #2084c3 0%, #00caa0 100%);
}
.active {
background: linear-gradient(to right, #2084c3 0%, #00caa0 100%);
}
.active:before{
color: #2084c3;
}
#media screen and (-webkit-min-device-pixel-ratio:0) { .active:before {
background: linear-gradient(to right, #2084c3 0%, #00caa0 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}}
Demo
There are probably better ways to do this, but without further thinking I'd try something like this:
<style type="text/css">
.semi_outer {
padding: 2px;
text-align: center;
border-radius: 11px;
background: linear-gradient(to right, #0f0, #00f);
}
.semi_inner {
margin: 2px;
border-radius: 7px;
background-color: #000;
color: #0f0;
}
.semi_outer:hover {
background: linear-gradient(to right, #c00, #0c0);
}
.semi_outer:active {
background: linear-gradient(to right, #f00, #0f0);
}
</style>
<div class="semi_outer">
<div class="semi_inner">
semi_inner
</div>
</div>
This is your semi-round button . may be it will be helpfull for you.
.outer {
padding: 2px;
text-align: center;
border-radius: 11px;
background: linear-gradient(to right, #0f0, #00f);
width: 200px;
height:30px;
}
.inner {
margin: 3px;
border-radius: 7px;
background-color: #000;
color: #0f0;
height:25px;
}
.outer:hover {
background: linear-gradient(to right, #c00, #0c0);
}
.outer:active {
background: linear-gradient(to right, #f00, #0f0);
}
<div class="outer">
<div class="inner">
BUTTON
</div>
</div>
Here is the code in action:
http://jsfiddle.net/uop7dz7L/5/
This is menu. I used gradient background. When I remove gradients then the a:hover works. But somehow background:gradient is overriding it and disables it.
Any ideas?
#headwrap {
border-top: 2px solid #F5FBFD;
border-radius: 4px;
}
#inheader {
padding-top: 30px;
width: 973px;
margin: 0px auto;
}
#inheader ul {
font-size: 0;
padding: 0 0 0 0px;
list-style-type: none;
}
#inheader a {
text-decoration: none;
text-align: center;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, #ffffff), color-stop(50%, #ffffff), color-stop(51%, #ededed), color-stop(100%, #f7f7f7));
background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
background: -o-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
background: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f7f7f7', GradientType=0 );
background: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
display: inline-block;
font-family: 'open sans', sans-serif;
font-size: 14px;
height: 38px;
line-height: 38px;
color: #0088CB;
transition: color 0.4s ease 0s;
-webkit-transition: color 0.4s ease 0s;
padding: 0px 23px 0px 22px;
border-right: 1px solid #0088CB;
}
a#contactus {
padding: 0px 23px 0px 22px;
border-right: 0px;
}
div#inheader a:hover {
background-color: fuchsia;
}
#inheader li {
display: inline;
}
#nesmenu1 {
/*width: 972px;*/
border-bottom: 1px solid #E3E8EB;
border-left: 1px solid #E3E8EB;
border-radius: 4px;
}
#nesmenu2 {
border-top: 1px solid #ECF2F4;
border-right: 1px solid #ECF2F4;
border-bottom: 1px solid #CDD1D4;
border-left: 1px solid #CDD1D4;
border-radius: 4px;
}
#nesmenu3 {
border-top: 1px solid #DCE0E3;
border-right: 1px solid #DCE0E3;
border-bottom: 1px solid #B1B4B6;
border-left: 1px solid #B1B4B6;
border-radius: 4px;
}
#nesmenu4 {
border-bottom: 1px solid #F8F8F8;
border-radius: 4px;
}
<div id="headwrap">
<div id="header">
<div id="inheader">
<div id="nesmenu1">
<div id="nesmenu2">
<div id="nesmenu3">
<div id="nesmenu4">
<ul>
<li>HOME</li>
<li>PRODUCTS</li>
<li>SONIC TOOTHBRUSH</li>
<li>SONIC TRAVEL</li>
<li>SONIC PLUS</li>
<li>ACCESSORIES</li>
<li><a id="contactus" href="#">CONTACT US</a></li>
</ul>
</div><!--nesmenu4-->
</div><!--nesmenu3-->
</div><!--nesmenu2-->
</div><!--nesmenu1-->
</div><!--inheader-->
</div><!--header-->
</div><!--headwrap-->
How about using background instead of background-color;
div#inheader a:hover {
background: fuchsia;
}
Even better - if you want to keep the gradients, set new gradients in this div/id with the fuchsia colour like;
background: linear-gradient(to bottom, fuchsia 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
Change it depending on how you want to shade it..
http://jsfiddle.net/u5nt9h18/
The reason why background-color isn't working on :hover is because it's behind your gradient. From the W3C spec on background-image:
When setting a background image, authors should also specify a background color that will be used when the image is unavailable. When the image is available, it is rendered on top of the background color. (Thus, the color is visible in the transparent parts of the image).
The background-color is like z-index: 0. The background-image always lays on top of the background color. Since you have specified a color for every color stop in your gradient, none of your :hover color is coming through.
Instead you will have to declare a new background gradient on hover. If you want the background color to be a full color, simply state the same color for 0% and 100%.
Also, as a side-note: when using background gradients, use background-image instead of background. The background element is a shorthand property for all other background properties. You're not declaring any of the other properties, so declare only the one you're using.
I've cleaned up your example with the correct CSS below.
#headwrap {
border-top: 2px solid #F5FBFD;
border-radius: 4px;
}
#inheader {
padding-top: 30px;
width: 973px;
margin: 0px auto;
}
#inheader ul {
font-size: 0;
padding: 0 0 0 0px;
list-style-type: none;
}
#inheader a {
text-decoration: none;
text-align: center;
background-color: #ffffff;
background-image: -moz-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
background-image: -webkit-gradient(left top, left bottom, color-stop(0%, #ffffff), color-stop(50%, #ffffff), color-stop(51%, #ededed), color-stop(100%, #f7f7f7));
background-image: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
background-image: -o-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
background-image: -ms-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
background-image: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f7f7', GradientType=0);
background-image: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
display: inline-block;
font-family: 'open sans', sans-serif;
font-size: 14px;
height: 38px;
line-height: 38px;
color: #0088CB;
-webkit-transition: color 0.4s ease 0s, background 0.1s ease-in;
transition: color 0.4s ease, background 0.1s ease-in;
padding: 0px 23px 0px 22px;
border-right: 1px solid #0088CB;
}
a#contactus {
padding: 0px 23px 0px 22px;
border-right: 0px;
}
div#inheader a:hover {
background-image: -moz-linear-gradient(top, fuchsia 0%, fuchsia 100%);
background-image: -webkit-gradient(left top, left bottom, color-stop(0%, fuchsia), color-stop(100%, fuchsia));
background-image: -webkit-linear-gradient(top, fuchsia 0%, fuchsia 100%);
background-image: -o-linear-gradient(top, fuchsia 0%, fuchsia 100%);
background-image: -ms-linear-gradient(top, fuchsia 0%, fuchsia 100%);
background-image: linear-gradient(to bottom, fuchsia 0%, fuchsia 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='fuchsia', endColorstr='fuchsia', GradientType=0);
background-image: linear-gradient(to bottom, fuchsia 0%, fuchsia 100%);
}
#inheader li {
display: inline;
}
#nesmenu1 {
/*width: 972px;*/
border-bottom: 1px solid #E3E8EB;
border-left: 1px solid #E3E8EB;
border-radius: 4px;
}
#nesmenu2 {
border-top: 1px solid #ECF2F4;
border-right: 1px solid #ECF2F4;
border-bottom: 1px solid #CDD1D4;
border-left: 1px solid #CDD1D4;
border-radius: 4px;
}
#nesmenu3 {
border-top: 1px solid #DCE0E3;
border-right: 1px solid #DCE0E3;
border-bottom: 1px solid #B1B4B6;
border-left: 1px solid #B1B4B6;
border-radius: 4px;
}
#nesmenu4 {
border-bottom: 1px solid #F8F8F8;
border-radius: 4px;
}
<div id="headwrap">
<div id="header">
<div id="inheader">
<div id="nesmenu1">
<div id="nesmenu2">
<div id="nesmenu3">
<div id="nesmenu4">
<ul>
<li>HOME
</li>
<li>PRODUCTS
</li>
<li>SONIC TOOTHBRUSH
</li>
<li>SONIC TRAVEL
</li>
<li>SONIC PLUS
</li>
<li>ACCESSORIES
</li>
<li><a id="contactus" href="#">CONTACT US</a>
</li>
</ul>
</div>
<!--nesmenu4-->
</div>
<!--nesmenu3-->
</div>
<!--nesmenu2-->
</div>
<!--nesmenu1-->
</div>
<!--inheader-->
</div>
<!--header-->
</div>
<!--headwrap-->
When you use background-color, you only change that property of the background property. Because gradients don't use the color and just show the gradient over the background-color, changing the background-color doesn't affect them.
To fix it, simply change the entire background instead of just background-color :
div#inheader a:hover {
background: fuchsia;
}
http://jsfiddle.net/zswr71Lc/
I am trying to make my current CSS buttons on my website 2 or 3 times their actual size for mobile devices.. i'm not having much luck
The sytles
.all-news-btn {
background: #666666;
background-image: -webkit-linear-gradient(top, #666666, #333333);
background-image: -moz-linear-gradient(top, #666666, #333333);
background-image: -ms-linear-gradient(top, #666666, #333333);
background-image: -o-linear-gradient(top, #666666, #333333);
background-image: linear-gradient(to bottom, #666666, #333333);
-webkit-border-radius: 3;
-moz-border-radius: 3;
border-radius: 3px;
font-family: Arial !important;
color: #ffffff !important;
font-size: 12px !important;
padding: 7px 8px 7px 7px;
text-decoration: none;
margin-left: 3px;
}
.all-news-btn:hover {
background: #666666;
background-image: -webkit-linear-gradient(top, #666666, #000000);
background-image: -moz-linear-gradient(top, #666666, #000000);
background-image: -ms-linear-gradient(top, #666666, #000000);
background-image: -o-linear-gradient(top, #666666, #000000);
background-image: linear-gradient(to bottom, #666666, #000000);
text-decoration: none;
}
The Media query
#media only screen and (max-device-width: 480px)
{
.all-news-btn {width: 100%; font-size: 4.25em;}
}
Working example
.bt{
background: #333;
color: #fdfdfd;
min-height: 35px;
margin: 0;
border-radius: 3px;
border: 0;
line-height: 35px;
text-align: center;
margin: .5em 0 .5em 0;
}
a.bt{
display: inline;
padding: 7px 10px 7px 10px;
}
.bt:hover{
background: #000;
}
#media only screen and (max-width:480px) {
.bt {
width: 100%;
}
a.bt{
display: block;
padding: 0;
}
}
<button class="bt">Button example</button>
<a class="bt">A example</a>
<input class="bt" type="button" value="Input example"/>
Solving
You can easly solve this issue by adding a min-width attribute to your main button class. Check it out:
In JSFiddle too :)
or Codepen
.all-news-btn {
background: #666666;
background-image: -webkit-linear-gradient(top, #666666, #333333);
background-image: -moz-linear-gradient(top, #666666, #333333);
background-image: -ms-linear-gradient(top, #666666, #333333);
background-image: -o-linear-gradient(top, #666666, #333333);
background-image: linear-gradient(to bottom, #666666, #333333);
-webkit-border-radius: 3;
-moz-border-radius: 3;
border-radius: 3px;
font-family: Arial !important;
color: #ffffff !important;
font-size: 12px !important;
padding: 7px 8px 7px 7px;
text-decoration: none;
margin-left: 3px;
min-width: 100px;
min-height: 30px;
display: inline;
}
.all-news-btn:hover {
background: #666666;
background-image: -webkit-linear-gradient(top, #666666, #000000);
background-image: -moz-linear-gradient(top, #666666, #000000);
background-image: -ms-linear-gradient(top, #666666, #000000);
background-image: -o-linear-gradient(top, #666666, #000000);
background-image: linear-gradient(to bottom, #666666, #000000);
text-decoration: none;
}
#media only screen and (max-width:480px) {
.all-news-btn {width: 100%; font-size: 4.25em; }
}
<button class="all-news-btn">Button example</button>
<input class="all-news-btn" type="button" value="Input example"/>
I'm trying to style several checkbox with CSS, but only one is working. What is wrong in my code? I'd like to have unique ids for the checkboxes, but the CSS here doesn't seem to allow it.
demo: http://jsfiddle.net/JW3qf/65/
html:
<div class="slideparam">
<input type="checkbox" id="slideparam" value="1">
<label for="slideparam"></label>
</div>
<div class="slideparam">
<input type="checkbox" id="slideparam" value="1">
<label for="slideparam"></label>
</div>
css:
input[type=checkbox] {
visibility: hidden;
}
/* SLIDE THREE */
.slideparam {
width: 80px;
height: 26px;
background: #333;
margin: 20px auto;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
position: relative;
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
}
.slideparam:after {
content: 'OFF';
font: 12px/26px Arial, sans-serif;
color: #000;
position: absolute;
right: 10px;
z-index: 0;
font-weight: bold;
text-shadow: 1px 1px 0px rgba(255,255,255,.15);
}
.slideparam:before {
content: 'ON';
font: 12px/26px Arial, sans-serif;
color: #00bf00;
position: absolute;
left: 10px;
z-index: 0;
font-weight: bold;
}
.slideparam label {
display: block;
width: 34px;
height: 20px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
-ms-transition: all .4s ease;
transition: all .4s ease;
cursor: pointer;
position: absolute;
top: 3px;
left: 3px;
z-index: 1;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
background: #fcfff4;
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
}
.slideparam input[type=checkbox]:checked + label {
left: 43px;
}
IDs must be unique, meaning that you can only use a particular ID once on a page. Classes, on the other hand, can be used multiple times on a page.
You'll want to use IDs so that your labels work correctly, but make each ID different to keep it unique. I suggest a structure like this:
input[type=checkbox] {
visibility: hidden;
}
.slideparam {
position: relative;
width: 80px;
height: 26px;
background: #333;
margin: 20px auto;
border-radius: 50px;
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
}
.slideparam:after {
content: 'OFF';
position: absolute;
right: 10px;
z-index: 0;
font: 12px/26px Arial, sans-serif;
color: #000;
font-weight: bold;
text-shadow: 1px 1px 0px rgba(255, 255, 255, .15);
}
.slideparam:before {
content: 'ON';
position: absolute;
left: 10px;
z-index: 0;
font: 12px/26px Arial, sans-serif;
color: #00bf00;
font-weight: bold;
}
.slideparam label {
display: block;
position: absolute;
top: 3px;
left: 3px;
width: 34px;
height: 20px;
border-radius: 50px;
transition: all .4s ease;
cursor: pointer;
z-index: 1;
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
background: #fcfff4;
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfff4', endColorstr='#b3bead', GradientType=0);
}
.slideparam input[type=checkbox]:checked+label {
left: 43px;
}
<div class="slideparam">
<input type="checkbox" id="slideparam_1" value="1" />
<label for="slideparam_1"></label>
</div>
<div class="slideparam">
<input type="checkbox" id="slideparam_2" value="2" />
<label for="slideparam_2"></label>
</div>
<div class="slideparam">
<input type="checkbox" id="slideparam_3" value="3" />
<label for="slideparam_3"></label>
</div>
<input type="checkbox" id="slideparam" value="1">
<input type="checkbox" id="slideparam" value="1">
id has to be UNIQUE
I suggest you to validate your html with w3c validator. You'd have noticed the error.
Just replace your ID's with unique values and apply your styling in another way.
The problem is that your css is styling classes, but you don't have any classes in your css, rather you have ids instad of classes.
Change the ids in your html to classes and it will work.
.slideparam
stands for class
while in your html there is only id="slideparam"
I have the following links :
<div class="links">
Home
About Me
Contacts<span></span>
Contact Author
<div class="link">
</div>
</div>
with this css file:
.links {
height: 50px;
display: inline;
text-align: center;
padding: 0px 0px 0px 170px;
margin-right: 0px;
margin-top: 7px;
border: none;
line-height: 25px;
}
.links a {
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
color: black;
font-family: Calibri;
font-size: 13px;
text-decoration: none;
padding: 2px 10px;
border: 1px solid #ccc;
}
.links a span {
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 3px solid #555;
display: inline-block;
margin: 2px 7px;
}
I want the links to show in one line ie: [home] [contacts] [link3] etc
but currently its showing on seperate lines like:
[home][contacts]
[link3]
How can I get them on one line?
You've got display: block assigned to your <a> tags. That will put each one on their own line. Remove that, and they'll be on the same line.