Skip to content

Instantly share code, notes, and snippets.

@felippenardi

felippenardi/index.html

Created April 30, 2015 04:46
Show Gist options
  • Save felippenardi/bd81d111de4dfedab5f7 to your computer and use it in GitHub Desktop.
Save felippenardi/bd81d111de4dfedab5f7 to your computer and use it in GitHub Desktop.
Download ZIP
Cmd Key CSS // source http://jsbin.com/yevapelubi
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cmd Key CSS</title>
<style id="jsbin-css">
body {
background: #FFF;
margin: 40px;
}
.key {
position: relative;
display: inline-block;
border: 3px solid #A9A9A9;
width: 95px;
height: 95px;
border-radius: 10px;
color: #7C7C7C;
background: #EFEFEF;
}
.key:before {
content: '';
position: absolute;
background: #FAFAFA;
background: -webkit-linear-gradient(white, #fdfdfd, #fafafa);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(white, #fdfdfd, #fafafa);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(white, #fdfdfd, #fafafa);
/* For Firefox 3.6 to 15 */
background: linear-gradient(white, #fdfdfd, #fafafa);
/* Standard syntax */
top: -3px;
left: -3px;
bottom: 3px;
right: -3px;
border: 3px solid #A9A9A9;
border-radius: 10px;
color: #7C7C7C;
}
.key__cmd {
font-size: 2.6em;
position: relative;
top: 0.5em;
left: 0.6em;
}
</style>
</head>
<body>
<div class="key">
<div class="key__cmd">
⌘
</div>
</div>
<script id="jsbin-source-css" type="text/css">body { background: #FFF; margin: 40px;}
.key {
position: relative;
display: inline-block;
border: 3px solid #A9A9A9;
width: 95px; height: 95px;
border-radius: 10px;
color: #7C7C7C;
background: #EFEFEF;
&:before {
content:'';
position: absolute;
background: #FAFAFA;
background: -webkit-linear-gradient(#FFF, #FDFDFD, #FAFAFA); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#FFF, #FDFDFD, #FAFAFA); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#FFF, #FDFDFD, #FAFAFA); /* For Firefox 3.6 to 15 */
background: linear-gradient(#FFF, #FDFDFD, #FAFAFA); /* Standard syntax */
top: -3px; left: -3px; bottom: 3px; right: -3px;
border: 3px solid #A9A9A9;
border-radius: 10px;
color: #7C7C7C;
}
&__cmd {
font-size: 2.6em;
position:relative;
top: 0.5em;
left: 0.6em;
}
}</script>
</body>
</html>
Raw
jsbin.yevapelubi.css
body {
background: #FFF;
margin: 40px;
}
.key {
position: relative;
display: inline-block;
border: 3px solid #A9A9A9;
width: 95px;
height: 95px;
border-radius: 10px;
color: #7C7C7C;
background: #EFEFEF;
}
.key:before {
content: '';
position: absolute;
background: #FAFAFA;
background: -webkit-linear-gradient(white, #fdfdfd, #fafafa);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(white, #fdfdfd, #fafafa);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(white, #fdfdfd, #fafafa);
/* For Firefox 3.6 to 15 */
background: linear-gradient(white, #fdfdfd, #fafafa);
/* Standard syntax */
top: -3px;
left: -3px;
bottom: 3px;
right: -3px;
border: 3px solid #A9A9A9;
border-radius: 10px;
color: #7C7C7C;
}
.key__cmd {
font-size: 2.6em;
position: relative;
top: 0.5em;
left: 0.6em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment