Animated Video Play Button by Adobe

Developer
Kevin Weber
Size
2,668 Kb
Views
14,168
  1. Animated Video Play Button by Adobe Previews
  2. Animated Video Play Button by Adobe HTML Codes
  3. Animated Video Play Button by Adobe CSS Codes

How do I make an animated video play button by adobe?

Hover play button to start and see the transition. Source: http://www.adobe.com/de/marketing-cloud/enterprise-content-management.html. What is a animated video play button by adobe? How do you make a animated video play button by adobe? This script and codes were developed by Kevin Weber on 20 November 2022, Sunday.

Animated Video Play Button by Adobe Previews
IQ Test

Animated Video Play Button by Adobe - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated Video Play Button by Adobe</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="video-play-button"></div>
</body>
</html>

Animated Video Play Button by Adobe - Script Codes CSS Codes

*, *:before, *:after { box-sizing: border-box;
}
body { background: black; color: white; font: normal normal 500 normal 96px/normal arial, sans-serif;
}
.video-play-button { background-position: 0px 0px; cursor: pointer; left: 80px; position: absolute; top: 80px; -webkit-transform: matrix(1, 0, 0, 1, 0, 0); transform: matrix(1, 0, 0, 1, 0, 0); content: ''; border: 0px none white; outline: white none 0px;
}
.video-play-button:after { cursor: pointer; display: block; height: 48px; position: absolute; width: 40px; -webkit-transform: matrix(1, 0, 0, 1, -20, -24); transform: matrix(1, 0, 0, 1, -20, -24); -webkit-transform-origin: 20px 24px; transform-origin: 20px 24px; content: ''; border-top: 24px solid black; border-right: 0px solid black; border-bottom: 24px solid black; border-left: 40px solid white; margin: 0px 0px 0px 4.80000019073486px; -webkit-transition: border 0.15s ease 0s, box-shadow 0.15s ease 0s; transition: border 0.15s ease 0s, box-shadow 0.15s ease 0s;
}
.video-play-button:before { box-shadow: white 0px 0px 0px 1.8px inset, white 0px 0px 0px 4.8px, rgba(0, 0, 0, 0.24706) 0px 0px 3.6px 1.8px; cursor: pointer; display: block; height: 96px; position: absolute; width: 96px; -webkit-transform: matrix(1, 0, 0, 1, -48, -48); transform: matrix(1, 0, 0, 1, -48, -48); -webkit-transform-origin: 48px 48px; transform-origin: 48px 48px; content: ''; border: 9px solid black; border-radius: 48px 48px 48px 48px; margin: 0px -64.3199996948242px -24px 0px; -webkit-transition: border 0.15s ease 0s, box-shadow 0.15s ease 0s; transition: border 0.15s ease 0s, box-shadow 0.15s ease 0s;
}
.video-play-button:hover { z-index: 1; -webkit-transform: matrix(1, 0, 0, 1, 0, 0); transform: matrix(1, 0, 0, 1, 0, 0); border: 0px none white;
}
.video-play-button:hover:before { box-shadow: white 0px 0px 0px 4.8px inset, white 0px 0px 0px 1.8px, rgba(0, 0, 0, 0.24706) 0px 0px 3.6px 1.8px; border: 4px solid black;
}
Animated Video Play Button by Adobe - Script Codes
Animated Video Play Button by Adobe - Script Codes
Home Page Home
Developer Kevin Weber
Username kevinweber
Uploaded November 20, 2022
Rating 3
Size 2,668 Kb
Views 14,168
Do you need developer help for Animated Video Play Button by Adobe?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kevin Weber (kevinweber) Script Codes
Name
Text with Background Image
CSS Loading Animation Circle
SqueezeText demo
Logo icon and text animation
CSS-only link confirm dialog
Slack Icon Letter Generator
Mark text on hover
Simple Pulsating Button
Change link color from left to right
Zoom background cover image on hover
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!