Play Button

Simple CSS3 play button

by J. Albert Bowden

HTML

<div class="play_border">
    <div class="play_button"></div>
</div>

CSS

.play_border {
    margin:5px;
    border: 2px solid rgba(0,0,0,0.7);
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    width: 40px;
    height: 40px;
    -webkit-box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
    cursor: pointer;
}
.play_border:hover{
    border-color: transparent;
    -webkit-box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.2);
}
.play_border:hover .play_button{
    border-left: 10px solid rgba(0,0,0,0.5);
}
.play_border:active,.play_border:focus{
    -webkit-box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 5.play_button:hoverpx 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.2);
}
.play_button {
    position:relative;
    top: 10px;
    left: 40%;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid rgba(0,0,0,0.8);
}