CSS3 Ying Yang

Lien en css3

by toubia95

HTML

<a href="#" class="ying-yang"></a>

CSS

@charset "UTF-8";

body {
    padding: 50px;
}

a {
    text-decoration: none;
}

.ying-yang {
    position: relative;
    display: block;
    width: 100px;
    height:100px;
    background:#fff;
    border-radius: 50px;
    border: 1px solid #000;
    background-image: linear-gradient(bottom, rgb(0,0,0) 50%, rgb(255,255,255) 50%);
background-image: -o-linear-gradient(bottom, rgb(0,0,0) 50%, rgb(255,255,255) 50%);
background-image: -moz-linear-gradient(bottom, rgb(0,0,0) 50%, rgb(255,255,255) 50%);
background-image: -webkit-linear-gradient(bottom, rgb(0,0,0) 50%, rgb(255,255,255) 50%);
background-image: -ms-linear-gradient(bottom, rgb(0,0,0) 50%, rgb(255,255,255) 50%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.5, rgb(0,0,0)),
    color-stop(0.5, rgb(255,255,255))
);
}

.ying-yang:before, .ying-yang:after {
    content:"●";
    font: 20px/50px verdana, sans-serif;
    text-align: center;
    display: block;
    width: 50px;
    height:50px;
    border-radius: 25px;
    position: absolute;
    top: 25px;
}

.ying-yang:before {
    left: 0;
    background:black;
    color: white;
}

.ying-yang:after {
    right: 0;
    background:white;
    color: black;
}

.ying-yang:hover {
    background:#000;
    background-image: linear-gradient(bottom, rgb(255,255,255) 50%, rgb(0,0,0) 50%);
background-image: -o-linear-gradient(bottom, rgb(255,255,255) 50%, rgb(0,0,0) 50%);
background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 50%, rgb(0,0,0) 50%);
background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 50%, rgb(0,0,0) 50%);
background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 50%, rgb(0,0,0) 50%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.5, rgb(255,255,255)),
    color-stop(0.5, rgb(0,0,0))
);
}

.ying-yang:hover:before {
    background:white;
    color: black;
}

.ying-yang:hover:after {
    background:black;
    color: white;
}