<!--
Project: Stampsynk - Free Codes
Author: @Saulomg2
Description: Responsive Button for the tubesynk website, with buttons and useful links.
Website: https://stampsynk.com
License: Open source
Creation date: February 2025
-->
<div class=button>
<a href="https://stampsynk.com/" target="_blank" class="cta-button">
Jump Button
</a>
</div>
<p style="margin-top: 20px; font-size: 14px; opacity: 0.8;">Developed by <a href="https://stampsynk.com" target="_blank" style="color: #ffd700; text-decoration: underline;">
Stampsynk.com</a></p>
</div>
/*
Project: Stampsynk - Free Codes
Author: @Saulomg2
Description: Responsive Button for the tubesynk website, with buttons and useful links.
Website: https://stampsynk.com
License: Open source
Creation date: February 2025
*/
.button { text-align: center; margin-top: 50px; }
/* Animation */
@keyframes moveButton {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-10px); /* Sobe 10px */
}
100% {
transform: translateY(0);
}
}
/* Style */
.cta-button {
display: inline-block;
padding: 20px 40px;
font-size: 18px;
font-weight: bold;
color: #fff;
text-decoration: none;
background-color: #ff5733;
border-radius: 50px;
text-transform: uppercase;
letter-spacing: 1.5px;
transition: background-color 0.3s ease;
animation: moveButton 1.5s ease-in-out infinite; /* Continuous animation */
}
/* Changing button color on hover */
.cta-button:hover {
background-color: #e64a19; /* Cor mais escura no hover */
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.