Как сделать кнопку выключения с помощью CSS3?

Question

Я пытаюсь сделать кнопку выключения с помощью CSS3, похожую на эту картинку
http://static.desktopnexus.com/thumbnails/25080-bigthumbnail.jpg
Пока я получил это .Проблема в том, что я не могу сделать этот «полукруг» похожим на этот круг в центре изображения, не могу центрировать этот «полукруг», а руины теней-коробок - «полукруг».предложения по улучшению того, что я пытаюсь сделать?Спасибо заранее!

Answer 1

Вот моя попытка:

.shutdown {
    border: 8px solid #0cf;
    border-radius: 100px;
    box-shadow: 0 0 10px #0cf, inset 0 0 10px #0cf;
    height: 100px;
    width: 100px;
}

.shutdown .inner {
    border: 5px solid #0cf;
    border-radius: 100px;
    box-shadow: 0 0 10px #0cf, inset 0 0 10px #0cf;
    height: 30px;
    left: 30px;
    position: relative;
    top: 30px;
    width: 30px;
}

.shutdown .bar {
    border-left: 5px solid #0cf;
    box-shadow: 0 0 10px #0cf;
    height: 20px;
    left: 47px;
    position: relative;
    top: -15px;
    width: 0;
}

.shutdown .sub-bar {
    border-left: 11px solid black;
    height: 30px;
    margin-left: 44px;
    margin-top: -20px;
    position: absolute;
    width: 0;
}​

Ниже приведена структура HTML:

<div class="shutdown">
    <div class="inner"></div>
    <div class="sub-bar"></div>
    <div class="bar"></div>
</div>​

И вот демо .