Play Buttons
How do I make an play buttons?
Animated play buttons for TVnext HACKED website. What is a play buttons? How do you make a play buttons? This script and codes were developed by TVnext on 27 August 2022, Saturday.
Play Buttons - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Play Buttons</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="box"> <h1>Watch<br/>live</h1> <div> <button> <span class="arc1 splice-inner"></span> <span class="arc2"></span> <span class="arc3"></span> <span class="arc4"></span> <span class="arc5 splice-outter"></span> <span class="arc6"></span> <span class="arc7"></span> <span class="arc8 splice-inner "></span> </button> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Play Buttons - Script Codes CSS Codes
html { box-sizing: border-box;
}
*, *::after, *::before { box-sizing: inherit;
}
div.box { height: 400px; width: 400px; background-color: #000; background-image: url("http://cl.ly/image/3e0i1h3v201V/Screen%20Shot%202015-06-26%20at%201.14.34%20PM.jpg"); background-size: cover; position: relative; font-size: 16px; cursor: pointer;
}
div.box:before { content: " "; display: block; height: 0; width: 0; border-bottom: 25px solid transparent; border-left: 25px solid white; border-top: 25px solid transparent; position: absolute; top: 50%; right: auto; bottom: auto; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%) skewY(20deg) SkewX(-4deg); -moz-transform: translateX(-50%) translateY(-50%) skewY(20deg) SkewX(-4deg); -ms-transform: translateX(-50%) translateY(-50%) skewY(20deg) SkewX(-4deg); -o-transform: translateX(-50%) translateY(-50%) skewY(20deg) SkewX(-4deg); transform: translateX(-50%) translateY(-50%) skewY(20deg) SkewX(-4deg); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; margin-left: .1em; margin-top: .05em;
}
div.box > div { -webkit-animation: spin 4s linear infinite; -moz-animation: spin 4s linear infinite; animation: spin 4s linear infinite; height: 100%; width: 100%;
}
h1 { color: #fff; text-transform: uppercase; font-family: "Bebas", "Helvetica Condensed", "Helvetica", "Arial"; padding: 15px 20px; margin: 0; font-size: 34px; position: absolute; top: 0px; right: auto; bottom: auto; left: 0px;
}
@-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes spin { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); }
}
@keyframes spin { from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }
}
button { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; border: none; background-color: transparent; color: #fff; cursor: pointer; height: 80px; width: 80px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; position: absolute; top: 50%; right: auto; bottom: auto; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
}
span { overflow: hidden; position: absolute; top: -2em; right: 50%; bottom: 50%; left: -2em; transform-origin: 100% 100%; -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; transition: all 0.1s linear;
}
span:before { content: ''; display: block; box-sizing: border-box; border: solid 0.5em #dfff00; width: 200%; height: 200%; border-radius: 50%; transform: skewX(-30deg);
}
.arc1 { transform: rotate(0deg) skewX(30deg);
}
.arc2 { transform: rotate(45deg) skewX(30deg);
}
.arc3 { transform: rotate(90deg) skewX(30deg);
}
.arc4 { transform: rotate(135deg) skewX(30deg);
}
.arc5 { transform: rotate(180deg) skewX(30deg);
}
.arc6 { transform: rotate(225deg) skewX(30deg);
}
.arc7 { transform: rotate(270deg) skewX(30deg);
}
.arc8 { transform: rotate(315deg) skewX(30deg);
}
.splice-inner:before, .splice-outter:before { border-color: #fff;
}
.splice-inner { top: -3em; left: -3em;
}
.splice-outter { top: -1em; left: -1em;
}
div.box:hover button { height: 65px; width: 65px;
}
div.box:hover > div { -webkit-animation: none; -moz-animation: none; animation: none;
}
div.box:hover .splice-inner, div.box:hover .splice-outter { top: -2em; left: -2em;
}
div.box:hover .splice-inner:before, div.box:hover .splice-outter:before { border-color: #fff;
}
div.box:hover span:before { border-color: #fff;
}
div.box:hover:before { color: #fff;
}
Play Buttons - Script Codes JS Codes
$(function(){ var arcs = $('[class^="arc"]'); setInterval(function(){ arcs.removeClass('splice-inner').removeClass('splice-outter'); arcs.each(function(){ var rand = Math.floor((Math.random() * 5) + 1); if(rand === 1){ $(this).addClass('splice-inner'); } if(rand === 2){ $(this).addClass('splice-outter'); } }); },2000);
});
Developer | TVnext |
Username | tvnext |
Uploaded | August 27, 2022 |
Rating | 3 |
Size | 3,956 Kb |
Views | 32,384 |
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!
Name | Size |
A Pen by TVnext | 3,484 Kb |
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!
Name | Username | Size |
A Pen by Brendan Skousen | Bskousen | 2,954 Kb |
Static Image to Video Block | Grayghostvisuals | 4,864 Kb |
Underlined form fields | Mitchdot | 2,323 Kb |
Menubar compass mixin | Michaelparenteau | 4,925 Kb |
Javascript Welcome | Peterlewicki | 1,573 Kb |
Price Comparison Table | Orrinward | 3,459 Kb |
Loader | MikitaLisavets | 3,321 Kb |
Flex Chart | James_zedd | 4,111 Kb |
Flexbox Test | Icutpeople | 2,486 Kb |
About Us | Francescaedits | 1,902 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!