Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style_main.css">
    <title>Button</title>
</head>
<body>
<div id="main">
<div id="container_white">
  
  <div id="button_white">  </div>
​
</div>
<div id="container_black">
  
  <div id="button_black">  </div>
​
</div>
</div>
​
​
    
</body>
</html>
 
body{
margin: 0;
padding: 0;
background:#aaa;
}
#main{
width: 1000px;
margin: 0 auto;
}
​
​
#container_white{
margin: 10px 10px;
width: 400px;
height: 400px;
background:#ddd;
border:1px solid rgba(0,0,0,.5);
-webkit-box-shadow:inset 0 0 70px rgba(0,0,0,.25);
-moz-box-shadow: ;
box-shadow: ;
float:left;
}
​
​
#button_white{
margin: 160px auto;
width: 110px;
height: 55px;
background:#ddd;
cursor:pointer;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
​
-webkit-box-shadow: 0 2px 20px rgba(0,0,0,.25),inset 0 1.8px 0px rgba(255,255,255,.6), 0 2px 1px rgba(0,0,0,.1),inset 0 0 17px rgba(0,0,0,.1);
-moz-box-shadow: 0 2px 20px rgba(0,0,0,.25),inset 0 1.8px 0px rgba(255,255,255,.6), 0 2px 1px rgba(0,0,0,.1),inset 0 0 17px rgba(0,0,0,.1);
box-shadow: 0 2px 20px rgba(0,0,0,.25),inset 0 1.8px 0px rgba(255,255,255,.6), 0 2px 1px rgba(0,0,0,.1),inset 0 0 17px rgba(0,0,0,.1);
​
}
​
​
#button_white:hover{
​
-webkit-box-shadow:inset 0 0 20px rgba(0,0,0,.25), 0 1.8px 0px rgba(255,255,255,.4),inset 0 2px 0 rgba(0,0,0,.1);
​
}
​
#button_white::after{
content:'';
background:url(http://www.defaulticon.com/sites/default/files/styles/icon-front-page-32x32-preview/public/field/image/3D-Cube.png?itok=IXHcJaTO) 36px 10px no-repeat;
width: 110px;
height: 55px;
display: block;
opacity:0.7;
}
​
#button_white:hover::after{
content:'';
background:url(http://www.defaulticon.com/sites/default/files/styles/icon-front-page-32x32-preview/public/field/image/3D-Cube.png?itok=IXHcJaTO) 36px 15px no-repeat;
width: 110px;
height: 55px;
display: block;
opacity:0.7;
​
}
​
​
​
​
#container_black{
margin: 10px auto;
width: 400px;
height: 400px;
background:#222;
border:1px solid rgba(255,255,255,.8);
-webkit-box-shadow:inset 0 0 70px rgba(255,255,255,.25);
-moz-box-shadow: ;
box-shadow: ;
float:left;
}
​
​
#button_black{
margin: 160px auto;
width: 110px;
height: 55px;
background:#222;
cursor:pointer;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
​
-webkit-box-shadow: 0 2px 20px rgba(255,255,255,.25), 0 2px 1px rgba(255,255,255,.1),inset 0 0 20px rgba(255,255,255,.1),inset 0 1.8px 0px rgba(0,0,0,.6);
​
​
}
​
​
​
#button_black:hover{
-webkit-box-shadow:inset 0 0 20px rgba(255,255,255,.25),0 0 5px rgba(255,255,255,.4),inset 0 2px 0 rgba(255,255,255,.1), 0 1.8px 10px rgba(0,0,0,.9);
}
​
#button_black::after{
content:'';
background:url(http://www.defaulticon.com/sites/default/files/styles/icon-front-page-32x32-preview/public/field/image/display-mac-alt.png?itok=HRlmrx1a) 36px 10px no-repeat;
width: 110px;
height: 55px;
display: block;
}
​
​
#button_black:hover::after{
content:'';
background:url(http://www.defaulticon.com/sites/default/files/styles/icon-front-page-32x32-preview/public/field/image/display-mac-alt.png?itok=HRlmrx1a) 36px 15px no-repeat;
width: 110px;
height: 55px;
display: block;
​
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers