Skip to content

Instantly share code, notes, and snippets.

@feo52

feo52/index.html

Last active August 29, 2015 14:08
Show Gist options
  • Save feo52/3673952b844c335e138b to your computer and use it in GitHub Desktop.
Save feo52/3673952b844c335e138b to your computer and use it in GitHub Desktop.
Download ZIP
Pure CSS Three Lines Icon & Pure CSS Cross Lines Icon
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" />
<style type="text/css">
.pureCssThreeLinesIcon{ font-size: 32px; }
.pureCssCrossLinesIcon{ font-size: 32px; }
</style>
</head>
<body>
<div class="pureCssThreeLinesIcon">&#8801;</div>
<!--
<div class="pureCssCrossLinesIcon">&#0215;</div>
-->
</body>
</html>
Raw
style.css
/* -------------------------------------------------------------------------
ThreeLinesIcon & CrossLinesIcon
------------------------------------------------------------------------- */
.pureCssThreeLinesIcon {
width: 1em;
height: 1em;
position: relative;
box-sizing: border-box;
border: 0.125em solid #2c2c2c;
border-radius: 20%;
text-align:center;
line-height:1em;
}
.pureCssThreeLinesIcon::before {
content: "";
position: absolute;
top: 0.125em;
left: 0.125em;
width: 0.5em;
height: 0.5em;
box-sizing: border-box;
border-style: solid;
border-width: 0.125em 0em;
border-color: rgba(44,44,44,1);
background: rgba(44,44,44,0);
}
.pureCssThreeLinesIcon::after {
content: "";
position: absolute;
top: 0.3125em;
left: 0.125em;
width: 0.5em;
height: 0.125em;
background: #2C2C2C;
}
.pureCssThreeLinesIcon:hover,
.pureCssCrossLinesIcon {
width: 1em;
height: 1em;
box-sizing: border-box;
position: relative;
border: 0.125em solid #2c2c2c;
border-radius: 50%;
text-align:center;
line-height:1em;
}
.pureCssThreeLinesIcon:hover::before,
.pureCssCrossLinesIcon::before {
content: "";
position: absolute;
top: 0.3125em;
left: 0.125em;
width: 0.5em;
height: 0.125em;
box-sizing: border-box;
border-style: solid;
border-width: 0em;
border-color: rgba(44,44,44,0);
background: rgba(44,44,44,1);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.pureCssThreeLinesIcon:hover::after,
.pureCssCrossLinesIcon::after {
content: "";
position: absolute;
top: 0.3125em;
left: 0.125em;
width: 0.5em;
height: 0.125em;
background: #2C2C2C;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* -------------------------------------------------------------
ThreeLinesIcon transition
------------------------------------------------------------- */
.pureCssThreeLinesIcon {
-webkit-transition:
border-radius 0.6s ease-out 0.1s;
transition:
border-radius 0.6s ease-out 0.1s;
}
.pureCssThreeLinesIcon::before {
-webkit-transition:
top 0.2s ease-out 0.3s,
height 0.2s ease-out 0.3s,
border-width 0.2s ease-out 0.3s,
border-color 0.2s ease-out 0.3s,
background 0.2s ease-out 0.3s,
-webkit-transform 0.2s ease-out 0.0s;
transition:
top 0.2s ease-out 0.3s,
height 0.2s ease-out 0.3s,
border-width 0.2s ease-out 0.3s,
border-color 0.2s ease-out 0.3s,
background 0.2s ease-out 0.3s,
transform 0.2s ease-out 0.0s;
}
.pureCssThreeLinesIcon::after {
-webkit-transition:
-webkit-transform 0.2s ease-out 0.0s;
transition:
transform 0.2s ease-out 0.0s;
}
.pureCssThreeLinesIcon:hover {
-webkit-transition:
border-radius 0.6s ease-out 0.1s;
transition:
border-radius 0.6s ease-out 0.1s;
}
.pureCssThreeLinesIcon:hover::before {
-webkit-transition:
top 0.2s ease-out 0.0s,
height 0.2s ease-out 0.0s,
border-width 0.2s ease-out 0.0s,
border-color 0.2s ease-out 0.0s,
background 0.2s ease-out 0.0s,
-webkit-transform 0.2s ease-out 0.3s;
transition:
top 0.2s ease-out 0.0s,
height 0.2s ease-out 0.0s,
border-width 0.2s ease-out 0.0s,
border-color 0.2s ease-out 0.0s,
background 0.2s ease-out 0.0s,
transform 0.2s ease-out 0.3s;
}
.pureCssThreeLinesIcon:hover::after {
-webkit-transition:
-webkit-transform 0.2s ease-out 0.3s;
transition:
transform 0.2s ease-out 0.3s;
}
/* -------------------------------------------------------------
css hacks for IE
------------------------------------------------------------- */
.pureCssThreeLinesIcon, /* IE8 or less */
.pureCssCrossLinesIcon{ /* IE8 or less */
text-indent:0;
white-space:normal;
overflow:visible;
}
:root .pureCssThreeLinesIcon, /* other browsers */
:root .pureCssCrossLinesIcon{ /* other browsers */
text-indent:100%;
white-space:nowrap;
overflow:hidden;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment