Record button

Developer
Size
4,905 Kb
Views
30,360

How do I make an record button?

Based on "content", unfortunately it works in Chrome only. What is a record button? How do you make a record button? This script and codes were developed by Massimo on 17 September 2022, Saturday.

Record button Previews

Record button - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>record button</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container"> <input type="checkbox" id="btn"/> <label for="btn"></label> <div class="time"> <div class="h_m"></div> <div class="s_ms"></div> </div>
</div>
</body>
</html>

Record button - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Fjalla+One);
@-webkit-keyframes to_24 { 4.16667% { content: "01"; } 8.33333% { content: "02"; } 12.5% { content: "03"; } 16.66667% { content: "04"; } 20.83333% { content: "05"; } 25% { content: "06"; } 29.16667% { content: "07"; } 33.33333% { content: "08"; } 37.5% { content: "09"; } 41.66667% { content: "10"; } 45.83333% { content: "11"; } 50% { content: "12"; } 54.16667% { content: "13"; } 58.33333% { content: "14"; } 62.5% { content: "15"; } 66.66667% { content: "16"; } 70.83333% { content: "17"; } 75% { content: "18"; } 79.16667% { content: "19"; } 83.33333% { content: "20"; } 87.5% { content: "21"; } 91.66667% { content: "22"; } 95.83333% { content: "23"; }
}
@-moz-keyframes to_24 { 4.16667% { content: "01"; } 8.33333% { content: "02"; } 12.5% { content: "03"; } 16.66667% { content: "04"; } 20.83333% { content: "05"; } 25% { content: "06"; } 29.16667% { content: "07"; } 33.33333% { content: "08"; } 37.5% { content: "09"; } 41.66667% { content: "10"; } 45.83333% { content: "11"; } 50% { content: "12"; } 54.16667% { content: "13"; } 58.33333% { content: "14"; } 62.5% { content: "15"; } 66.66667% { content: "16"; } 70.83333% { content: "17"; } 75% { content: "18"; } 79.16667% { content: "19"; } 83.33333% { content: "20"; } 87.5% { content: "21"; } 91.66667% { content: "22"; } 95.83333% { content: "23"; }
}
@-o-keyframes to_24 { 4.16667% { content: "01"; } 8.33333% { content: "02"; } 12.5% { content: "03"; } 16.66667% { content: "04"; } 20.83333% { content: "05"; } 25% { content: "06"; } 29.16667% { content: "07"; } 33.33333% { content: "08"; } 37.5% { content: "09"; } 41.66667% { content: "10"; } 45.83333% { content: "11"; } 50% { content: "12"; } 54.16667% { content: "13"; } 58.33333% { content: "14"; } 62.5% { content: "15"; } 66.66667% { content: "16"; } 70.83333% { content: "17"; } 75% { content: "18"; } 79.16667% { content: "19"; } 83.33333% { content: "20"; } 87.5% { content: "21"; } 91.66667% { content: "22"; } 95.83333% { content: "23"; }
}
@keyframes to_24 { 4.16667% { content: "01"; } 8.33333% { content: "02"; } 12.5% { content: "03"; } 16.66667% { content: "04"; } 20.83333% { content: "05"; } 25% { content: "06"; } 29.16667% { content: "07"; } 33.33333% { content: "08"; } 37.5% { content: "09"; } 41.66667% { content: "10"; } 45.83333% { content: "11"; } 50% { content: "12"; } 54.16667% { content: "13"; } 58.33333% { content: "14"; } 62.5% { content: "15"; } 66.66667% { content: "16"; } 70.83333% { content: "17"; } 75% { content: "18"; } 79.16667% { content: "19"; } 83.33333% { content: "20"; } 87.5% { content: "21"; } 91.66667% { content: "22"; } 95.83333% { content: "23"; }
}
@-webkit-keyframes to_60 { 1.66667% { content: ":01"; } 3.33333% { content: ":02"; } 5% { content: ":03"; } 6.66667% { content: ":04"; } 8.33333% { content: ":05"; } 10% { content: ":06"; } 11.66667% { content: ":07"; } 13.33333% { content: ":08"; } 15% { content: ":09"; } 16.66667% { content: ":10"; } 18.33333% { content: ":11"; } 20% { content: ":12"; } 21.66667% { content: ":13"; } 23.33333% { content: ":14"; } 25% { content: ":15"; } 26.66667% { content: ":16"; } 28.33333% { content: ":17"; } 30% { content: ":18"; } 31.66667% { content: ":19"; } 33.33333% { content: ":20"; } 35% { content: ":21"; } 36.66667% { content: ":22"; } 38.33333% { content: ":23"; } 40% { content: ":24"; } 41.66667% { content: ":25"; } 43.33333% { content: ":26"; } 45% { content: ":27"; } 46.66667% { content: ":28"; } 48.33333% { content: ":29"; } 50% { content: ":30"; } 51.66667% { content: ":31"; } 53.33333% { content: ":32"; } 55% { content: ":33"; } 56.66667% { content: ":34"; } 58.33333% { content: ":35"; } 60% { content: ":36"; } 61.66667% { content: ":37"; } 63.33333% { content: ":38"; } 65% { content: ":39"; } 66.66667% { content: ":40"; } 68.33333% { content: ":41"; } 70% { content: ":42"; } 71.66667% { content: ":43"; } 73.33333% { content: ":44"; } 75% { content: ":45"; } 76.66667% { content: ":46"; } 78.33333% { content: ":47"; } 80% { content: ":48"; } 81.66667% { content: ":49"; } 83.33333% { content: ":50"; } 85% { content: ":51"; } 86.66667% { content: ":52"; } 88.33333% { content: ":53"; } 90% { content: ":54"; } 91.66667% { content: ":55"; } 93.33333% { content: ":56"; } 95% { content: ":57"; } 96.66667% { content: ":58"; } 98.33333% { content: ":59"; }
}
@-moz-keyframes to_60 { 1.66667% { content: ":01"; } 3.33333% { content: ":02"; } 5% { content: ":03"; } 6.66667% { content: ":04"; } 8.33333% { content: ":05"; } 10% { content: ":06"; } 11.66667% { content: ":07"; } 13.33333% { content: ":08"; } 15% { content: ":09"; } 16.66667% { content: ":10"; } 18.33333% { content: ":11"; } 20% { content: ":12"; } 21.66667% { content: ":13"; } 23.33333% { content: ":14"; } 25% { content: ":15"; } 26.66667% { content: ":16"; } 28.33333% { content: ":17"; } 30% { content: ":18"; } 31.66667% { content: ":19"; } 33.33333% { content: ":20"; } 35% { content: ":21"; } 36.66667% { content: ":22"; } 38.33333% { content: ":23"; } 40% { content: ":24"; } 41.66667% { content: ":25"; } 43.33333% { content: ":26"; } 45% { content: ":27"; } 46.66667% { content: ":28"; } 48.33333% { content: ":29"; } 50% { content: ":30"; } 51.66667% { content: ":31"; } 53.33333% { content: ":32"; } 55% { content: ":33"; } 56.66667% { content: ":34"; } 58.33333% { content: ":35"; } 60% { content: ":36"; } 61.66667% { content: ":37"; } 63.33333% { content: ":38"; } 65% { content: ":39"; } 66.66667% { content: ":40"; } 68.33333% { content: ":41"; } 70% { content: ":42"; } 71.66667% { content: ":43"; } 73.33333% { content: ":44"; } 75% { content: ":45"; } 76.66667% { content: ":46"; } 78.33333% { content: ":47"; } 80% { content: ":48"; } 81.66667% { content: ":49"; } 83.33333% { content: ":50"; } 85% { content: ":51"; } 86.66667% { content: ":52"; } 88.33333% { content: ":53"; } 90% { content: ":54"; } 91.66667% { content: ":55"; } 93.33333% { content: ":56"; } 95% { content: ":57"; } 96.66667% { content: ":58"; } 98.33333% { content: ":59"; }
}
@-o-keyframes to_60 { 1.66667% { content: ":01"; } 3.33333% { content: ":02"; } 5% { content: ":03"; } 6.66667% { content: ":04"; } 8.33333% { content: ":05"; } 10% { content: ":06"; } 11.66667% { content: ":07"; } 13.33333% { content: ":08"; } 15% { content: ":09"; } 16.66667% { content: ":10"; } 18.33333% { content: ":11"; } 20% { content: ":12"; } 21.66667% { content: ":13"; } 23.33333% { content: ":14"; } 25% { content: ":15"; } 26.66667% { content: ":16"; } 28.33333% { content: ":17"; } 30% { content: ":18"; } 31.66667% { content: ":19"; } 33.33333% { content: ":20"; } 35% { content: ":21"; } 36.66667% { content: ":22"; } 38.33333% { content: ":23"; } 40% { content: ":24"; } 41.66667% { content: ":25"; } 43.33333% { content: ":26"; } 45% { content: ":27"; } 46.66667% { content: ":28"; } 48.33333% { content: ":29"; } 50% { content: ":30"; } 51.66667% { content: ":31"; } 53.33333% { content: ":32"; } 55% { content: ":33"; } 56.66667% { content: ":34"; } 58.33333% { content: ":35"; } 60% { content: ":36"; } 61.66667% { content: ":37"; } 63.33333% { content: ":38"; } 65% { content: ":39"; } 66.66667% { content: ":40"; } 68.33333% { content: ":41"; } 70% { content: ":42"; } 71.66667% { content: ":43"; } 73.33333% { content: ":44"; } 75% { content: ":45"; } 76.66667% { content: ":46"; } 78.33333% { content: ":47"; } 80% { content: ":48"; } 81.66667% { content: ":49"; } 83.33333% { content: ":50"; } 85% { content: ":51"; } 86.66667% { content: ":52"; } 88.33333% { content: ":53"; } 90% { content: ":54"; } 91.66667% { content: ":55"; } 93.33333% { content: ":56"; } 95% { content: ":57"; } 96.66667% { content: ":58"; } 98.33333% { content: ":59"; }
}
@keyframes to_60 { 1.66667% { content: ":01"; } 3.33333% { content: ":02"; } 5% { content: ":03"; } 6.66667% { content: ":04"; } 8.33333% { content: ":05"; } 10% { content: ":06"; } 11.66667% { content: ":07"; } 13.33333% { content: ":08"; } 15% { content: ":09"; } 16.66667% { content: ":10"; } 18.33333% { content: ":11"; } 20% { content: ":12"; } 21.66667% { content: ":13"; } 23.33333% { content: ":14"; } 25% { content: ":15"; } 26.66667% { content: ":16"; } 28.33333% { content: ":17"; } 30% { content: ":18"; } 31.66667% { content: ":19"; } 33.33333% { content: ":20"; } 35% { content: ":21"; } 36.66667% { content: ":22"; } 38.33333% { content: ":23"; } 40% { content: ":24"; } 41.66667% { content: ":25"; } 43.33333% { content: ":26"; } 45% { content: ":27"; } 46.66667% { content: ":28"; } 48.33333% { content: ":29"; } 50% { content: ":30"; } 51.66667% { content: ":31"; } 53.33333% { content: ":32"; } 55% { content: ":33"; } 56.66667% { content: ":34"; } 58.33333% { content: ":35"; } 60% { content: ":36"; } 61.66667% { content: ":37"; } 63.33333% { content: ":38"; } 65% { content: ":39"; } 66.66667% { content: ":40"; } 68.33333% { content: ":41"; } 70% { content: ":42"; } 71.66667% { content: ":43"; } 73.33333% { content: ":44"; } 75% { content: ":45"; } 76.66667% { content: ":46"; } 78.33333% { content: ":47"; } 80% { content: ":48"; } 81.66667% { content: ":49"; } 83.33333% { content: ":50"; } 85% { content: ":51"; } 86.66667% { content: ":52"; } 88.33333% { content: ":53"; } 90% { content: ":54"; } 91.66667% { content: ":55"; } 93.33333% { content: ":56"; } 95% { content: ":57"; } 96.66667% { content: ":58"; } 98.33333% { content: ":59"; }
}
@-webkit-keyframes to_100 { 1% { content: ":01"; } 2% { content: ":02"; } 3% { content: ":03"; } 4% { content: ":04"; } 5% { content: ":05"; } 6% { content: ":06"; } 7% { content: ":07"; } 8% { content: ":08"; } 9% { content: ":09"; } 10% { content: ":10"; } 11% { content: ":11"; } 12% { content: ":12"; } 13% { content: ":13"; } 14% { content: ":14"; } 15% { content: ":15"; } 16% { content: ":16"; } 17% { content: ":17"; } 18% { content: ":18"; } 19% { content: ":19"; } 20% { content: ":20"; } 21% { content: ":21"; } 22% { content: ":22"; } 23% { content: ":23"; } 24% { content: ":24"; } 25% { content: ":25"; } 26% { content: ":26"; } 27% { content: ":27"; } 28% { content: ":28"; } 29% { content: ":29"; } 30% { content: ":30"; } 31% { content: ":31"; } 32% { content: ":32"; } 33% { content: ":33"; } 34% { content: ":34"; } 35% { content: ":35"; } 36% { content: ":36"; } 37% { content: ":37"; } 38% { content: ":38"; } 39% { content: ":39"; } 40% { content: ":40"; } 41% { content: ":41"; } 42% { content: ":42"; } 43% { content: ":43"; } 44% { content: ":44"; } 45% { content: ":45"; } 46% { content: ":46"; } 47% { content: ":47"; } 48% { content: ":48"; } 49% { content: ":49"; } 50% { content: ":50"; } 51% { content: ":51"; } 52% { content: ":52"; } 53% { content: ":53"; } 54% { content: ":54"; } 55% { content: ":55"; } 56% { content: ":56"; } 57% { content: ":57"; } 58% { content: ":58"; } 59% { content: ":59"; } 60% { content: ":60"; } 61% { content: ":61"; } 62% { content: ":62"; } 63% { content: ":63"; } 64% { content: ":64"; } 65% { content: ":65"; } 66% { content: ":66"; } 67% { content: ":67"; } 68% { content: ":68"; } 69% { content: ":69"; } 70% { content: ":70"; } 71% { content: ":71"; } 72% { content: ":72"; } 73% { content: ":73"; } 74% { content: ":74"; } 75% { content: ":75"; } 76% { content: ":76"; } 77% { content: ":77"; } 78% { content: ":78"; } 79% { content: ":79"; } 80% { content: ":80"; } 81% { content: ":81"; } 82% { content: ":82"; } 83% { content: ":83"; } 84% { content: ":84"; } 85% { content: ":85"; } 86% { content: ":86"; } 87% { content: ":87"; } 88% { content: ":88"; } 89% { content: ":89"; } 90% { content: ":90"; } 91% { content: ":91"; } 92% { content: ":92"; } 93% { content: ":93"; } 94% { content: ":94"; } 95% { content: ":95"; } 96% { content: ":96"; } 97% { content: ":97"; } 98% { content: ":98"; } 99% { content: ":99"; }
}
@-moz-keyframes to_100 { 1% { content: ":01"; } 2% { content: ":02"; } 3% { content: ":03"; } 4% { content: ":04"; } 5% { content: ":05"; } 6% { content: ":06"; } 7% { content: ":07"; } 8% { content: ":08"; } 9% { content: ":09"; } 10% { content: ":10"; } 11% { content: ":11"; } 12% { content: ":12"; } 13% { content: ":13"; } 14% { content: ":14"; } 15% { content: ":15"; } 16% { content: ":16"; } 17% { content: ":17"; } 18% { content: ":18"; } 19% { content: ":19"; } 20% { content: ":20"; } 21% { content: ":21"; } 22% { content: ":22"; } 23% { content: ":23"; } 24% { content: ":24"; } 25% { content: ":25"; } 26% { content: ":26"; } 27% { content: ":27"; } 28% { content: ":28"; } 29% { content: ":29"; } 30% { content: ":30"; } 31% { content: ":31"; } 32% { content: ":32"; } 33% { content: ":33"; } 34% { content: ":34"; } 35% { content: ":35"; } 36% { content: ":36"; } 37% { content: ":37"; } 38% { content: ":38"; } 39% { content: ":39"; } 40% { content: ":40"; } 41% { content: ":41"; } 42% { content: ":42"; } 43% { content: ":43"; } 44% { content: ":44"; } 45% { content: ":45"; } 46% { content: ":46"; } 47% { content: ":47"; } 48% { content: ":48"; } 49% { content: ":49"; } 50% { content: ":50"; } 51% { content: ":51"; } 52% { content: ":52"; } 53% { content: ":53"; } 54% { content: ":54"; } 55% { content: ":55"; } 56% { content: ":56"; } 57% { content: ":57"; } 58% { content: ":58"; } 59% { content: ":59"; } 60% { content: ":60"; } 61% { content: ":61"; } 62% { content: ":62"; } 63% { content: ":63"; } 64% { content: ":64"; } 65% { content: ":65"; } 66% { content: ":66"; } 67% { content: ":67"; } 68% { content: ":68"; } 69% { content: ":69"; } 70% { content: ":70"; } 71% { content: ":71"; } 72% { content: ":72"; } 73% { content: ":73"; } 74% { content: ":74"; } 75% { content: ":75"; } 76% { content: ":76"; } 77% { content: ":77"; } 78% { content: ":78"; } 79% { content: ":79"; } 80% { content: ":80"; } 81% { content: ":81"; } 82% { content: ":82"; } 83% { content: ":83"; } 84% { content: ":84"; } 85% { content: ":85"; } 86% { content: ":86"; } 87% { content: ":87"; } 88% { content: ":88"; } 89% { content: ":89"; } 90% { content: ":90"; } 91% { content: ":91"; } 92% { content: ":92"; } 93% { content: ":93"; } 94% { content: ":94"; } 95% { content: ":95"; } 96% { content: ":96"; } 97% { content: ":97"; } 98% { content: ":98"; } 99% { content: ":99"; }
}
@-o-keyframes to_100 { 1% { content: ":01"; } 2% { content: ":02"; } 3% { content: ":03"; } 4% { content: ":04"; } 5% { content: ":05"; } 6% { content: ":06"; } 7% { content: ":07"; } 8% { content: ":08"; } 9% { content: ":09"; } 10% { content: ":10"; } 11% { content: ":11"; } 12% { content: ":12"; } 13% { content: ":13"; } 14% { content: ":14"; } 15% { content: ":15"; } 16% { content: ":16"; } 17% { content: ":17"; } 18% { content: ":18"; } 19% { content: ":19"; } 20% { content: ":20"; } 21% { content: ":21"; } 22% { content: ":22"; } 23% { content: ":23"; } 24% { content: ":24"; } 25% { content: ":25"; } 26% { content: ":26"; } 27% { content: ":27"; } 28% { content: ":28"; } 29% { content: ":29"; } 30% { content: ":30"; } 31% { content: ":31"; } 32% { content: ":32"; } 33% { content: ":33"; } 34% { content: ":34"; } 35% { content: ":35"; } 36% { content: ":36"; } 37% { content: ":37"; } 38% { content: ":38"; } 39% { content: ":39"; } 40% { content: ":40"; } 41% { content: ":41"; } 42% { content: ":42"; } 43% { content: ":43"; } 44% { content: ":44"; } 45% { content: ":45"; } 46% { content: ":46"; } 47% { content: ":47"; } 48% { content: ":48"; } 49% { content: ":49"; } 50% { content: ":50"; } 51% { content: ":51"; } 52% { content: ":52"; } 53% { content: ":53"; } 54% { content: ":54"; } 55% { content: ":55"; } 56% { content: ":56"; } 57% { content: ":57"; } 58% { content: ":58"; } 59% { content: ":59"; } 60% { content: ":60"; } 61% { content: ":61"; } 62% { content: ":62"; } 63% { content: ":63"; } 64% { content: ":64"; } 65% { content: ":65"; } 66% { content: ":66"; } 67% { content: ":67"; } 68% { content: ":68"; } 69% { content: ":69"; } 70% { content: ":70"; } 71% { content: ":71"; } 72% { content: ":72"; } 73% { content: ":73"; } 74% { content: ":74"; } 75% { content: ":75"; } 76% { content: ":76"; } 77% { content: ":77"; } 78% { content: ":78"; } 79% { content: ":79"; } 80% { content: ":80"; } 81% { content: ":81"; } 82% { content: ":82"; } 83% { content: ":83"; } 84% { content: ":84"; } 85% { content: ":85"; } 86% { content: ":86"; } 87% { content: ":87"; } 88% { content: ":88"; } 89% { content: ":89"; } 90% { content: ":90"; } 91% { content: ":91"; } 92% { content: ":92"; } 93% { content: ":93"; } 94% { content: ":94"; } 95% { content: ":95"; } 96% { content: ":96"; } 97% { content: ":97"; } 98% { content: ":98"; } 99% { content: ":99"; }
}
@keyframes to_100 { 1% { content: ":01"; } 2% { content: ":02"; } 3% { content: ":03"; } 4% { content: ":04"; } 5% { content: ":05"; } 6% { content: ":06"; } 7% { content: ":07"; } 8% { content: ":08"; } 9% { content: ":09"; } 10% { content: ":10"; } 11% { content: ":11"; } 12% { content: ":12"; } 13% { content: ":13"; } 14% { content: ":14"; } 15% { content: ":15"; } 16% { content: ":16"; } 17% { content: ":17"; } 18% { content: ":18"; } 19% { content: ":19"; } 20% { content: ":20"; } 21% { content: ":21"; } 22% { content: ":22"; } 23% { content: ":23"; } 24% { content: ":24"; } 25% { content: ":25"; } 26% { content: ":26"; } 27% { content: ":27"; } 28% { content: ":28"; } 29% { content: ":29"; } 30% { content: ":30"; } 31% { content: ":31"; } 32% { content: ":32"; } 33% { content: ":33"; } 34% { content: ":34"; } 35% { content: ":35"; } 36% { content: ":36"; } 37% { content: ":37"; } 38% { content: ":38"; } 39% { content: ":39"; } 40% { content: ":40"; } 41% { content: ":41"; } 42% { content: ":42"; } 43% { content: ":43"; } 44% { content: ":44"; } 45% { content: ":45"; } 46% { content: ":46"; } 47% { content: ":47"; } 48% { content: ":48"; } 49% { content: ":49"; } 50% { content: ":50"; } 51% { content: ":51"; } 52% { content: ":52"; } 53% { content: ":53"; } 54% { content: ":54"; } 55% { content: ":55"; } 56% { content: ":56"; } 57% { content: ":57"; } 58% { content: ":58"; } 59% { content: ":59"; } 60% { content: ":60"; } 61% { content: ":61"; } 62% { content: ":62"; } 63% { content: ":63"; } 64% { content: ":64"; } 65% { content: ":65"; } 66% { content: ":66"; } 67% { content: ":67"; } 68% { content: ":68"; } 69% { content: ":69"; } 70% { content: ":70"; } 71% { content: ":71"; } 72% { content: ":72"; } 73% { content: ":73"; } 74% { content: ":74"; } 75% { content: ":75"; } 76% { content: ":76"; } 77% { content: ":77"; } 78% { content: ":78"; } 79% { content: ":79"; } 80% { content: ":80"; } 81% { content: ":81"; } 82% { content: ":82"; } 83% { content: ":83"; } 84% { content: ":84"; } 85% { content: ":85"; } 86% { content: ":86"; } 87% { content: ":87"; } 88% { content: ":88"; } 89% { content: ":89"; } 90% { content: ":90"; } 91% { content: ":91"; } 92% { content: ":92"; } 93% { content: ":93"; } 94% { content: ":94"; } 95% { content: ":95"; } 96% { content: ":96"; } 97% { content: ":97"; } 98% { content: ":98"; } 99% { content: ":99"; }
}
@-webkit-keyframes time { to { top: 100%; opacity: 1; }
}
@-moz-keyframes time { to { top: 100%; opacity: 1; }
}
@-o-keyframes time { to { top: 100%; opacity: 1; }
}
@keyframes time { to { top: 100%; opacity: 1; }
}
@-webkit-keyframes stop { 70% { border-radius: 6px; position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px -30px; } 100% { border-radius: 6px; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px -32px; }
}
@-moz-keyframes stop { 70% { border-radius: 6px; position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px -30px; } 100% { border-radius: 6px; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px -32px; }
}
@-o-keyframes stop { 70% { border-radius: 6px; position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px -30px; } 100% { border-radius: 6px; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px -32px; }
}
@keyframes stop { 70% { border-radius: 6px; position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px -30px; } 100% { border-radius: 6px; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px -32px; }
}
body { overflow: hidden; background: #000;
}
body .container { position: absolute; left: 50%; top: 50%; width: 170px; height: 170px; margin: -85px -85px;
}
body .container #btn { display: none;
}
body .container #btn + label:before { position: absolute; left: 50%; top: 50%; width: 130px; height: 130px; margin: -65px -65px; content: ''; -webkit-transform: translate(-6px, -6px); -ms-transform: translate(-6px, -6px); transform: translate(-6px, -6px); border-radius: 50%; border: 6px solid #fff; cursor: pointer;
}
body .container #btn + label:after { position: absolute; left: 50%; top: 50%; width: 100px; height: 100px; margin: -50px -50px; content: ''; border-radius: 50px; background: #e80415; cursor: pointer;
}
body .container #btn:checked + label:after { -webkit-animation: stop 0.5s infinite cubic-bezier(0.4, -0.9, 0.9, 1); -moz-animation: stop 0.5s infinite cubic-bezier(0.4, -0.9, 0.9, 1); -o-animation: stop 0.5s infinite cubic-bezier(0.4, -0.9, 0.9, 1); animation: stop 0.5s infinite cubic-bezier(0.4, -0.9, 0.9, 1); -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
body .container #btn:checked ~ .time { -webkit-animation: time 0.3s infinite linear; -moz-animation: time 0.3s infinite linear; -o-animation: time 0.3s infinite linear; animation: time 0.3s infinite linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; animation-delay: 0.3s;
}
body .container #btn:checked ~ .time .h_m:after { -webkit-animation: to_24 86400s infinite linear; -moz-animation: to_24 86400s infinite linear; -o-animation: to_24 86400s infinite linear; animation: to_24 86400s infinite linear; -webkit-animation-delay: 1800s; animation-delay: 1800s;
}
body .container #btn:checked ~ .time .h_m:before { -webkit-animation: to_60 3600s infinite linear; -moz-animation: to_60 3600s infinite linear; -o-animation: to_60 3600s infinite linear; animation: to_60 3600s infinite linear; -webkit-animation-delay: 30s; animation-delay: 30s;
}
body .container #btn:checked ~ .time .s_ms:before { -webkit-animation: to_60 60s infinite linear; -moz-animation: to_60 60s infinite linear; -o-animation: to_60 60s infinite linear; animation: to_60 60s infinite linear; -webkit-animation-delay: 0.5s; animation-delay: 0.5s;
}
body .container #btn:checked ~ .time .s_ms:after { -webkit-animation: to_100 1s infinite linear; -moz-animation: to_100 1s infinite linear; -o-animation: to_100 1s infinite linear; animation: to_100 1s infinite linear;
}
body .container .time { position: absolute; width: 100%; top: 110%; opacity: 0;
}
body .container .time > * { display: inline-block; width: 50%; margin: -2px; color: #a2a2a2; font-family: 'Fjalla One', sans-serif; font-size: 1.3em;
}
body .container .time .h_m:after { float: right; position: relative; content: "00";
}
body .container .time .h_m:before { float: right; position: relative; content: ":00";
}
body .container .time .s_ms:before { float: left; position: relative; content: ":00";
}
body .container .time .s_ms:after { float: left; position: relative; content: ":00";
}
Record button - Script Codes
Record button - Script Codes
Home Page Home
Developer Massimo
Username _massimo
Uploaded September 17, 2022
Rating 4
Size 4,905 Kb
Views 30,360
Do you need developer help for Record button?

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!

Massimo (_massimo) Script Codes
Name
Melting ice cream
Spinner
Shovel knight
Spinner
Fake 3D
Css spirals
ASCII art
Svg penguin
Page Not Found
Css carousel
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!