Skip to content

Instantly share code, notes, and snippets.

@darul75 darul75/buttons.css
Last active Aug 29, 2015

Embed
What would you like to do?
CSS Play Pause Buttons
.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: 20px;
height: 20px;
-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;
display: inline-block;
/* For IE 7 */
zoom: 1;
*display: inline;
}
.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_border:hover .pause_button{
border-left: 4px solid rgba(0,0,0,0.5);
box-shadow: 4px 0px 0px rgba(0,0,0,0.5);
}
.play_border:active,.pause_button:focus{
-webkit-box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 5.pause_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: 2px;
left: 35%;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 10px solid rgba(0,0,0,0.8);
}
.pause_button {
position: relative;
top: 5px;
left: 26%;
width: 2px;
height: 10px;
box-shadow: 4px 0px 0px rgba(0,0,0,0.8);
border-left: 4px solid rgba(0,0,0,0.8);
}
<div class="play_border">
<div class="play_button"></div>
</div>
<div class="play_border">
<div class="pause_button"></div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.