Posted By

devowhippit on 03/01/13


Tagged

video button corners ROUNDED icon interface CSS3 play round symbol psuedo


Versions (?)

Simple CSS3 Play Button


 / Published in: CSS
 

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

  1. .video-btn {
  2. background: #333;
  3. width: 20%;
  4. height: 20%;
  5. left: 50%;
  6. top: 50%;
  7. margin-top: -30px;
  8. margin-left: -30px;
  9. border-radius: 50px;
  10. }
  11.  
  12. .video-btn::before {
  13. content: "";
  14. position: absolute;
  15. left: 50%;
  16. top: 50%;
  17. width: 0;
  18. height: 0;
  19. margin-top: -15.5px;
  20. margin-left: -11px;
  21. border-top: 15px solid transparent;
  22. border-bottom: 15px solid transparent;
  23. border-left: 28px solid #FFF;
  24. }

Report this snippet  

You need to login to post a comment.