Skip to content

Instantly share code, notes, and snippets.

@Postobject
Last active October 13, 2015 05:27
Show Gist options
  • Save Postobject/4145791 to your computer and use it in GitHub Desktop.
Save Postobject/4145791 to your computer and use it in GitHub Desktop.
CSS Round Button: white/white
<div class="knob">
<h2>2</h2>
</div>
/* CSS */
.knob {
text-align: center;
margin: 50px;
width: 50px;
height: 50px;
/*background: #f0f0ef; */
border: 2px solid white;
border-radius: 90px;
box-shadow: 0 3px 9px #c5c2c2,
0 0 0 transparent inset;
/* 0px 1px 6px rgba(20, 20, 20, .1); */
color: #828282;
text-shadow: 1px 1px 0 #fefefe;
white-space: normal;
font: normal normal bold 19px/.3 univers;
top: 0;
padding-top: 0;
background: -webkit-linear-gradient(225deg, rgb(209, 207, 207) 0.9%, rgba(238,238,238,1) 100%) #fffffe;
-webkit-transition: box-shadow .3s linear;
-moz-transition: box-shadow .3s linear;
-o-transition: box-shadow .3s linear;
-ms-transition: box-shadow .3s linear;
transition: box-shadow .3s linear;
}
.knob:hover {
box-shadow: 0 0px 0px transparent,
inset 0 3px 9px #c5c2c2;
text-shadow: -1px -1px 0 transparent;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment