From 77433df32ca42184390338033828610ef197958d Mon Sep 17 00:00:00 2001
From: seaskymonster <seaskymonster@wenlaideMacBook-Pro.local>
Date: Fri, 24 Oct 2014 14:12:47 -0700
Subject: [PATCH] button summary

---
 circle_button/index.html |   6 +-
 circle_button/style.css  | 120 +++++++++++++++++++++++++++------------
 2 files changed, 89 insertions(+), 37 deletions(-)

diff --git a/circle_button/index.html b/circle_button/index.html
index f610bd3..63194fe 100644
--- a/circle_button/index.html
+++ b/circle_button/index.html
@@ -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>
diff --git a/circle_button/style.css b/circle_button/style.css
index 36851ee..a9b5da6 100644
--- a/circle_button/style.css
+++ b/circle_button/style.css
@@ -1,43 +1,54 @@
 .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;
@@ -45,9 +56,9 @@
   -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;
@@ -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%);
@@ -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;