HTML/CSS/JS Lamp Pull Chain

pull-chain.css

#light-switch {
    position: fixed;
    top: -1.5em;
    right: 1em;
    text-align: center;
    cursor: pointer;
    z-index: 1021;
}

#light-switch div.rounded-circle {
    width: 0.3em;
    height: 0.8em;
    border: 2px dashed white;
    margin: 0 auto;
}

#light-switch div.knob {
    color: #fac403;
    font-size: 0.6em;
    font-family: sans-serif;
}

#light-switch div.knob span {
    font-size: 0.8em;
    position: relative;
    bottom: 2px;
}

.pull-down {
    animation: PullCord 0.6s linear;
}

@keyframes PullCord {
    0%, 100% {
        top: -1.5em;
    }
    50% {
        top: 0;
    }
}

pull-chain.html

<div id="light-switch">
	<div class="rounded-circle"></div>
	<div class="rounded-circle"></div>
	<div class="rounded-circle"></div>
	<div class="rounded-circle"></div>
	<div class="knob"><span>{</span>II<span>}</span></div>
</div>

pull-chain.js

$('#light-switch').on('click', function() {
	$(this).addClass('pull-down');
}).on('webkitAnimationEnd oanimationend msAnimationEnd animationend', function() {
	$(this).removeClass('pull-down');
});