Bouncing Btn
How do I make an bouncing btn?
This pen is heavily inspired by this site > http://www.amplifon.co.uk/sounds-of-street-view/how-and-create/index.html. Make sure to check it out.. What is a bouncing btn? How do you make a bouncing btn? This script and codes were developed by Hornebom on 12 August 2022, Friday.
Bouncing Btn - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bouncing Btn</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a href="#" class="btn-download"></a>
<p>This pen is heavily inspired by this <a href="http://www.amplifon.co.uk/sounds-of-street-view/how-and-create/index.html">site</a>. Make sure to check it out.<br />I decided to rebuild one little element in CSS only and tweaked the animation a bit.</p>
</body>
</html>
Bouncing Btn - Script Codes CSS Codes
@import url(http://fonts.googleapis.com/css?family=Roboto:400,900);
*, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box;
}
html, body { width: 100%; height: 100%;
}
body { padding-top: 20%; font-family: 'Roboto', sans-serif; color: white; background-color: #071321; background-image: -webkit-radial-gradient(rgba(0, 0, 0, 0), #071321), url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJFYmVuZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB3aWR0aD0iOXB4IiBoZWlnaHQ9IjlweCIgdmlld0JveD0iMCAwIDkgOSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOSA5IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBvbHlnb24gZmlsbD0iIzJFM0I0MSIgcG9pbnRzPSIwLDIuMTIxIDYuODc5LDkgOSw5IDksNi44NzkgMi4xMjEsMCAwLDAgIi8+Cjxwb2x5Z29uIGZpbGw9IiMyRTNCNDEiIHBvaW50cz0iOSwwIDYuODc5LDAgOSwyLjEyMSAiLz4KPHBvbHlnb24gZmlsbD0iIzJFM0I0MSIgcG9pbnRzPSIyLjE1Miw5IDAsNi44NDggMCw5ICIvPgo8L3N2Zz4K"); background-image: radial-gradient(rgba(0, 0, 0, 0), #071321), url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJFYmVuZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB3aWR0aD0iOXB4IiBoZWlnaHQ9IjlweCIgdmlld0JveD0iMCAwIDkgOSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOSA5IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBvbHlnb24gZmlsbD0iIzJFM0I0MSIgcG9pbnRzPSIwLDIuMTIxIDYuODc5LDkgOSw5IDksNi44NzkgMi4xMjEsMCAwLDAgIi8+Cjxwb2x5Z29uIGZpbGw9IiMyRTNCNDEiIHBvaW50cz0iOSwwIDYuODc5LDAgOSwyLjEyMSAiLz4KPHBvbHlnb24gZmlsbD0iIzJFM0I0MSIgcG9pbnRzPSIyLjE1Miw5IDAsNi44NDggMCw5ICIvPgo8L3N2Zz4K"); background-size: cover, 3px 3px; text-align: center; -webkit-transform: translateZ(0); transform: translateZ(0);
}
.btn-download { position: relative; display: inline-block; width: 4rem; height: 4rem; border: 2px solid white; background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJFYmVuZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB3aWR0aD0iMTc4Ljg1MXB4IiBoZWlnaHQ9IjE3OC4zN3B4IiB2aWV3Qm94PSIwIDAgMTc4Ljg1MSAxNzguMzciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE3OC44NTEgMTc4LjM3IgoJIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjE0MS41MTcsNTMuMjczIDExMi42MDUsODIuMTg1IDExMi42MDUsMS4xMzggNjQuMTU4LDEuMTM4IDY0LjE1OCw4Mi4xODUgMzUuMjQ2LDUzLjI3MyAKCTAuOTg5LDg3LjUzIDg4LjM4MSwxNzQuOTIyIDE3NS43NzQsODcuNTMgIi8+Cjwvc3ZnPg=="); background-size: 40% auto; background-repeat: no-repeat; background-position: 50% 50%; border-radius: 50%; box-shadow: 0 0 20px 2px #17beab, -7px -7px 10px -4px #17beab, inset 1px 1px 2px white, inset 0 0 10px 2px #17beab; -webkit-animation: bounce 1s infinite; animation: bounce 1s infinite;
}
.btn-download:before, .btn-download:after { content: ''; position: absolute;
}
.btn-download:before { top: 6px; left: 7px; width: 3px; height: 3px; background-color: white; border-radius: 50%; box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.5), -1px -1px 4px rgba(255, 255, 255, 0.8), -2px -2px 4px rgba(255, 255, 255, 0.7), -3px -3px 5px rgba(255, 255, 255, 0.5), -4px -4px 6px rgba(255, 255, 255, 0.3), 1px 1px 4px rgba(255, 255, 255, 0.8), 2px 2px 4px rgba(255, 255, 255, 0.7), 3px 3px 5px rgba(255, 255, 255, 0.5), 4px 4px 6px rgba(255, 255, 255, 0.3);
}
.btn-download:after { top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; -webkit-animation: glow 1s infinite; animation: glow 1s infinite;
}
@-webkit-keyframes bounce { 0%, 100% { -webkit-transform: translateY(-7%); transform: translateY(-7%); background-position: 50% 48%; } 50% { -webkit-transform: translateY(7%); transform: translateY(7%); background-position: 50% 52%; }
}
@keyframes bounce { 0%, 100% { -webkit-transform: translateY(-7%); transform: translateY(-7%); background-position: 50% 48%; } 50% { -webkit-transform: translateY(7%); transform: translateY(7%); background-position: 50% 52%; }
}
@-webkit-keyframes glow { 20% { box-shadow: 0 0 0 0 rgba(23, 190, 171, 0.3), inset 0 0 0 0 rgba(23, 190, 171, 0.3); } 100% { box-shadow: 0 0 0 50px rgba(23, 190, 171, 0), inset 0 0 0 12px rgba(23, 190, 171, 0); }
}
@keyframes glow { 20% { box-shadow: 0 0 0 0 rgba(23, 190, 171, 0.3), inset 0 0 0 0 rgba(23, 190, 171, 0.3); } 100% { box-shadow: 0 0 0 50px rgba(23, 190, 171, 0), inset 0 0 0 12px rgba(23, 190, 171, 0); }
}
a { color: #17beab; text-decoration: none;
}
p { position: relative; padding: 5rem 3rem;
}
Developer | Hornebom |
Username | Hornebom |
Uploaded | August 12, 2022 |
Rating | 4.5 |
Size | 4,699 Kb |
Views | 34,408 |
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 |
PPDC Button | 2,520 Kb |
CSS Slime Attack | 7,232 Kb |
Head Over Heels | 3,871 Kb |
Timeline Dummy | 3,320 Kb |
Folding Button | 4,346 Kb |
Rocker Switch | 5,948 Kb |
Ipad Mini Showcase | 10,479 Kb |
Wanderer | 3,287 Kb |
BudgetSlider | 3,546 Kb |
D I S C O B T N | 2,728 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 |
Parallax scrolling scene | Iharosi | 2,485 Kb |
Flat UI Button | Honchoman | 2,289 Kb |
JavaScript constructors | Simboonlong | 2,415 Kb |
Awesome textarea | Ayoungh | 1,977 Kb |
CSS Hover Effects | Alen | 3,613 Kb |
Animated Vertical CSS3 Menu Black | MaCeLMp4 | 2,750 Kb |
Flexbox Test | Icutpeople | 2,486 Kb |
Barber Shop | Bhlaird | 6,270 Kb |
Another brick in the wall | Fivera | 1,955 Kb |
Degree Picker | Idered | 4,307 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!