استایل زیبا برای دکمه های دو حالتی - CSS3 Toggle Buttons ( نمونه 4)

@import url(http://fonts.googleapis.com/css?family=Francois+One);

@import url(http://fonts.googleapis.com/css?family=PT+Sans);

@font-face {

font-family: 'Audiowide';

font-style: normal;

font-weight: 400;

src: local("Audiowide"), local("Audiowide-Regular"), url(http://themes.googleusercontent.com/static/fonts/audiowide/v2/8XtYtNKEyyZh481XVWfVOj8E0i7KZn-EPnyo3HZu7kw.woff) format("woff");

}

body {

font-size: 62.5%;

background-color: #fff;

margin: 10px;

border: 1px solid #333;

}

*,

*::before,

*::after {

box-sizing: border-box;

}

h1, h2, h3 {

font-family: 'PT Sans', sans-serif;

text-transform: uppercase;

}

h1 {

font-size: 2.4em;

background-color: #292929;

text-align: center;

padding: 20px;

margin: 0;

color: #fff;

}

h1 a {

display: block;

margin-top: 10px;

text-transform: none;

color: #aaa;

font-size: 16px;

text-decoration: none;

}

.headingOuter {

background: #f1f1f1;

text-align: center;

margin-top: 50px;

margin-bottom: 0;

padding: 10px;

border-top: 1px solid #333;

border-bottom: 1px solid #333;

font-size: 1.6em;

}

.headingOuter:first-child {

margin-top: 0;

}

h1 + .headingOuter {

margin-top: 0;

}

/* =====================================================

Some defaults across all toggle demos

===================================================== */

.toggle {

display: block;

text-align: center;

margin-top: 40px;

user-select: none;

}

.toggle--checkbox {

display: none;

}

.toggle--btn {

display: block;

margin: 0 auto;

font-size: 1.4em;

transition: all 350ms ease-in;

}

.toggle--btn:hover {

cursor: pointer;

}

.toggle--btn, .toggle--btn:before, .toggle--btn:after,

.toggle--checkbox,

.toggle--checkbox:before,

.toggle--checkbox:after,

.toggle--feature,

.toggle--feature:before,

.toggle--feature:after {

transition: all 250ms ease-in;

}

.toggle--btn:before, .toggle--btn:after,

.toggle--checkbox:before,

.toggle--checkbox:after,

.toggle--feature:before,

.toggle--feature:after {

content: '';

display: block;

}

/* ======================================================

Push button toggle

====================================================== */

.toggle--push .toggle--btn {

position: relative;

width: 50px;

height: 50px;

background-color: #f9f8f6;

border-radius: 50%;

box-shadow: 0 5px 10px 0px #333, 0 15px 20px 0px #cccccc;

}

.toggle--push .toggle--btn, .toggle--push .toggle--btn:before, .toggle--push .toggle--btn:after {

transition-duration: 150ms;

}

.toggle--push .toggle--btn:before {

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

width: 22.72727px;

height: 22.72727px;

border-radius: 50%;

background-color: #FF9900;

box-shadow: inset 0 0 0 5px #ccc, inset 0 0 0 14px #f9f8f6;

}

.toggle--push .toggle--btn:after {

position: absolute;

left: 50%;

top: 35%;

transform: translate(-50%, -50%);

width: 4px;

height: 12px;

background-color: #ccc;

box-shadow: 0 0 0 2.5px #f9f8f6;

}

.toggle--push .toggle--btn:hover:before {

box-shadow: inset 0 0 0 5px #b3b3b3, inset 0 0 0 14px #f9f8f6;

}

.toggle--push .toggle--btn:hover:after {

background-color: #b3b3b3;

}

.toggle--push .toggle--checkbox:checked + .toggle--btn {

box-shadow: 0 2px 5px 0px gray, 0 15px 20px 0px transparent;

}

.toggle--push .toggle--checkbox:checked + .toggle--btn:before {

box-shadow: inset 0 0 0 5px #FF9900, inset 0 0 0 14px #f9f8f6;

}

.toggle--push .toggle--checkbox:checked + .toggle--btn:after {

background-color: #FF9900;

}

.toggle--push--glow {

background: #111;

padding: 50px 0;

margin-bottom: -50px;

}

.toggle--push--glow .toggle--btn {

background-color: #dfdfdf;

box-shadow: 0 5px 10px 0px #333, 0 0 0 3px #444444, 0 0 8px 2px transparent, 0 0 0 6px #919191;

}

.toggle--push--glow .toggle--btn:before {

box-shadow: inset 0 0 0 5px #aaa, inset 0 0 0 14px #dfdfdf;

}

.toggle--push--glow .toggle--btn:after {

background-color: #aaa;

box-shadow: 0 0 0 2.5px #dfdfdf;

}

.toggle--push--glow .toggle--btn:hover:before {

box-shadow: inset 0 0 0 5px #777777, inset 0 0 0 14px #dfdfdf;

}

.toggle--push--glow .toggle--btn:hover:after {

background-color: #777777;

}

.toggle--push--glow .toggle--checkbox:checked + .toggle--btn {

box-shadow: 0 0px 8px 0 #0072ad, 0 0 0 3px #0094e0, 0 0 30px 0 #0094e0, 0 0 0 6px #777777;

}

.toggle--push--glow .toggle--checkbox:checked + .toggle--btn:before {

box-shadow: inset 0 0 0 5px #0094e0, inset 0 0 0 14px #dfdfdf;

}

.toggle--push--glow .toggle--checkbox:checked + .toggle--btn:after {

background-color: #0094e0;

}

سون لرن • آموزش...