Advanced Search

Simple CSS3 Play Button

/ Published in: CSS
Save to your folder(s)
Uses CSS3 attributes and psuedo elements to create a simple play button for web interfaces.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.