Pure CSS - Fullscreen

http://nicolasgallagher.com/pure-css-gui-icons/

by Jens Kühn

HTML

<i class="pure-css-gui-icons full"><a href="#non">&nbsp;</a></i>
<i class="pure-css-gui-icons exit"><a href="#non">&nbsp;</a></i>

CSS

.pure-css-gui-icons {
    position:relative;
    z-index:1;
    overflow:hidden;
    list-style:none;
    padding:0;
    margin:0 0 0.25em;
    font-style: normal;
}
.pure-css-gui-icons a:link,
.pure-css-gui-icons a:visited {
    border:0;
    padding:0 8px 0 8px;
    text-decoration:none;
}

.pure-css-gui-icons:before,
.pure-css-gui-icons:after,
.pure-css-gui-icons a:before,
.pure-css-gui-icons a:after {
    content:"";
    position:absolute;
    top:50%;
    left:0;
}
.pure-css-gui-icons a:before,
.pure-css-gui-icons a:after {
    margin:-8px 0 0;
    background:#c55500;
}

.pure-css-gui-icons a:hover:before,
.pure-css-gui-icons a:focus:before,
.pure-css-gui-icons a:active:before {
    background:#730800;
}
/* FULL SCREEN
------------------------------------------------------------------------------------------------------------------------------- */

.full:before,
.full:after {
    z-index:1;
    left:8px;
    width:3px;
    height:8px;
    border:5px solid #c55500;
    border-width:5px 0;
    margin-top:-8px;
    /* css3 */
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
}

.full:after {
    /* css3 */
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    transform:rotate(-45deg);
}

.full:hover:before,
.full:hover:after {
    border-color:#730800;
}

.full a:before,
.full a:after {
    z-index:10;
    width:4px;
    height:0;
    border-width:0 7px 7px;
    border-style:solid;
    border-color:transparent #c55500;
    margin-top:-8px;
    background:transparent;
}

.full a:after {
    border-width:7px 7px 0;
    margin-top:3px;
}

.full a:hover:before,
.full a:focus:before,
.full a:active:before,
.full a:hover:after,
.full a:focus:after,
.full a:active:after {
    border-color:transparent #730800;
    background:transparent;
}

/*...