Skip to content

Commit

Permalink
button summary
Browse files Browse the repository at this point in the history
  • Loading branch information
seaskymonster authored and seaskymonster committed Oct 24, 2014
1 parent 806d4c1 commit 77433df
Show file tree
Hide file tree
Showing 2 changed files with 89 additions and 37 deletions.
6 changes: 4 additions & 2 deletions circle_button/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,10 @@
<input type="checkbox">
<span class="hole">
<span class="switch">
<span class="one"></span>
<span class="zero"></span>
<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>
</span>
</span>
</label>
Expand Down
120 changes: 85 additions & 35 deletions circle_button/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,53 +1,64 @@
.button {
position: absolute;
top: calc(50% - 115px);
left: calc(50% - 90px);
top: 50%;
left: 50%;
margin-right: -50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%,-50%);
display: block;
width: 180px;
height: 230px;
width: 250px;
height: 250px;
background-image: -webkit-linear-gradient(top, #464a54 0%, #2c2225 100%);
background-image: linear-gradient(to bottom, #464a54 0%, #2c2225 100%);
border-radius: 6px;
border-radius: 50%; /*// which makes it a circle*/
cursor: pointer;
box-shadow: 0 -5px 0px #464649, 0 4px 20px rgba(0, 0, 0, 0.5), 0 2px 1px #66696e inset, 4px 0 0 rgba(0, 0, 0, 0.1) inset, -4px 0 0 rgba(0, 0, 0, 0.1) inset, 0 -8px 2px rgba(0, 0, 0, 0.1) inset;
}
.button .hole {
position: absolute;
top: 20px;
left: 20px;
position: absolute; /*//means relative its first parent*/
top: 10px;
left: 10px;
display: block;
width: 140px;
height: 186px;
width: 230px;
height: 230px;
overflow: hidden;
background-color: #090909;
border-radius: 8px;
border-radius: 50%;
box-shadow: 0 -2px 1px rgba(255, 255, 255, 0.25) inset, 0 2px 1px rgba(255, 255, 255, 0.2) inset;
}
.button .switch {
position: absolute;
top: 6px;
left: 4px;
top: 5px;
left: 5px;
display: block;
width: 132px;
height: 174px;
background-image: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 0.07) 0%, transparent 80%), -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.15) 0%, transparent 80%), -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 30%, transparent 50%), -webkit-linear-gradient(top, #882626 0%, #290606 100%);
background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.07) 0%, transparent 80%), radial-gradient(ellipse at center, rgba(0, 0, 0, 0.15) 0%, transparent 80%), radial-gradient(ellipse at center, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 30%, transparent 50%), linear-gradient(to bottom, #882626 0%, #290606 100%);
background-size: 100% 80px, 100% 80px, 10px 10px, 100%;
width: 220px;
height: 220px;
/* background-image: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 0.07) 0%, transparent 80%), -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.15) 0%, transparent 80%), -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 30%, transparent 50%), -webkit-linear-gradient(top, #882626 0%, #290606 100%);
*/
/*background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.07) 0%, transparent 80%), radial-gradient(ellipse at center, rgba(0, 0, 0, 0.15) 0%, transparent 80%), radial-gradient(ellipse at center, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 30%, transparent 50%), linear-gradient(to bottom, #882626 0%, #290606 100%);
background-size: 100% 80px, 100% 80px, 10px 10px, 100%;
background-position: top left, bottom left, bottom left, center;
background-repeat: no-repeat, no-repeat, repeat, no-repeat;
border-radius: 8px;
box-shadow: 2px 0 1px rgba(255, 255, 255, 0.1) inset, -2px 0 1px rgba(255, 255, 255, 0.1) inset, 0 -2px 2px rgba(255, 255, 255, 0.05) inset, 0 4px 2px rgba(0, 0, 0, 0.05) inset, 0 -30px 8px rgba(198, 45, 45, 0.5), 0 -25px 8px rgba(198, 45, 45, 0.3), 0 -20px 8px rgba(198, 45, 45, 0.4), 0 -15px 8px rgba(198, 45, 45, 0.5), 0 -10px 8px rgba(198, 45, 45, 0.6), 0 -5px 8px rgba(198, 45, 45, 0.9);
-webkit-transform-style: preserve3d;
background-repeat: no-repeat, no-repeat, repeat, no-repeat;*/

background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 30%, transparent 50%), linear-gradient(to bottom, #99FF99 0%, #99FFCC 100%) ;
background-size:10px 10px, 100%;
background-position:bottom left, center;
background-repeat: repeat, no-repeat;


border-radius: 50%;
/* box-shadow: 2px 0 1px rgba(255, 255, 255, 0.1) inset, -2px 0 1px rgba(255, 255, 255, 0.1) inset, 0 -2px 2px rgba(255, 255, 255, 0.05) inset, 0 4px 2px rgba(0, 0, 0, 0.05) inset, 0 -30px 8px rgba(198, 45, 45, 0.5), 0 -25px 8px rgba(198, 45, 45, 0.3), 0 -20px 8px rgba(198, 45, 45, 0.4), 0 -15px 8px rgba(198, 45, 45, 0.5), 0 -10px 8px rgba(198, 45, 45, 0.6), 0 -5px 8px rgba(198, 45, 45, 0.9);*/
/*-webkit-transform-style: preserve3d;
transform-style: preserve3d;
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: perspective(1500px) rotateX(-30deg) translateY(16px);
transform: perspective(1500px) rotateX(-30deg) translateY(16px);
-webkit-transition: -webkit-transform 200ms ease;
transition: transform 200ms ease;
transition: transform 200ms ease;*/
}
.button .switch:before {
/*.button .switch:before {
content: "";
position: absolute;
top: -2px;
Expand All @@ -56,8 +67,8 @@
height: 5px;
background-image: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 0.4) 0%, transparent 80%);
background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.4) 0%, transparent 80%);
}
.button .switch .one {
}*/
/*.button .switch .one {
position: absolute;
top: 24px;
left: calc(47%);
Expand All @@ -78,21 +89,60 @@
height: 40px;
box-shadow: 0 4px 2px rgba(255, 255, 255, 0.5) inset, 0 -4px 2px rgba(0, 0, 0, 0.2) inset, 0 0 0 6px #666666 inset;
border-radius: 50%;
}*/

.button .switch .arrow-up {
position: absolute;
top:55px;
left:55px;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;

border-bottom: 70px solid rgba(240, 17, 51, 0.84);


}


















.button input {
display: none;
}
.button input:checked ~ .hole .switch {
background-image: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 0.07) 0%, transparent 80%), -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.15) 0%, transparent 80%), -webkit-radial-gradient(center, ellipse, rgba(254, 244, 0, 0.5) 0%, rgba(254, 244, 0, 0.2) 30%, rgba(254, 244, 0, 0.1) 50%, transparent 80%), -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 30%, transparent 50%), -webkit-linear-gradient(top, #b43222 0%, #a51810 100%);
background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.07) 0%, transparent 80%), radial-gradient(ellipse at center, rgba(0, 0, 0, 0.15) 0%, transparent 80%), radial-gradient(ellipse at center, rgba(254, 244, 0, 0.5) 0%, rgba(254, 244, 0, 0.2) 30%, rgba(254, 244, 0, 0.1) 50%, transparent 80%), radial-gradient(ellipse at center, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 30%, transparent 50%), linear-gradient(to bottom, #b43222 0%, #a51810 100%);
background-size: 100% 80px, 100% 80px, 100% 180px, 10px 10px, 100%;
background-position: top left, bottom left, 0 30px, bottom left, center;
background-repeat: no-repeat, no-repeat, no-repeat, repeat, no-repeat;
border-radius: 8px;
box-shadow: 4px 0 1px rgba(255, 255, 255, 0.15) inset, -4px 0 1px rgba(255, 255, 255, 0.15) inset, 0 4px 1px rgba(255, 255, 255, 0.15) inset, 0 -12px 8px rgba(0, 0, 0, 0.25) inset, 0 30px 8px rgba(128, 17, 5, 0.5), 0 25px 8px rgba(128, 17, 5, 0.3), 0 20px 8px rgba(128, 17, 5, 0.4), 0 15px 8px rgba(128, 17, 5, 0.5), 0 10px 8px rgba(128, 17, 5, 0.6), 0 5px 8px rgba(128, 17, 5, 0.9);
-webkit-transform: perspective(1500px) rotateX(30deg) translateY(-16px);
transform: perspective(1500px) rotateX(30deg) translateY(-16px);


background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.02) 30%, transparent 50%), linear-gradient(to bottom, #99FF00 0%, #99FF33 100%) ;
background-size:10px 10px, 100%;
background-position:bottom left, center;
background-repeat: repeat, no-repeat;


border-radius: 50%;

}






.button input:checked ~ .hole .switch:before {
top: auto;
bottom: -2px;
Expand Down

0 comments on commit 77433df

Please sign in to comment.