Himas Rafeek
Posted on: 2 years ago
CSS

Simple CSS3 Play Button

Uses CSS3 attributes and psuedo elements to create a simple play button for web interfaces.


                                          .video-btn {
    background: #333;
    width: 20%;
    height: 20%;
    left: 50%;
    top: 50%;
    margin-top: -30px;
    margin-left: -30px;
    border-radius: 50px;
}
 .video-btn::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    margin-top: -15.5px;
    margin-left: -11px;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 28px solid #FFF;
}