I have been doing CSS animations with SVG arrows, I thought they're pretty unique but aren't sure if other people think the same. So I'm wondering if there are people who find these interesting and want to know (if haven't already) how to make cute and unique animations like these:
Please leave a comment below to let me know what do you think! (interested, not really interested or already know how and it's too easy) ❤️
Top comments (2)
You can achive the same effect by pure css also brother
<div class="button-container">
<button>Subscribe <span class="arrow">→</span></button>
</div>
` .button-container {
display: flex;
justify-content: center;
margin-top:100px ;
}
button:hover{
background-color: rgb(144, 41, 41);
color: white;
border-radius: 10px;
}
.arrow { /* Styles for the arrow itself /
display: inline-block; / Make it block-level /
margin-left: 5px; / Space from the text /
transition: transform 0.2s ease; / Smooth transition */
}
button:hover .arrow {
transform: scale(1.5); /* Grow the arrow on hover */
}`
Yes, I'm trying to learn how to do this for a site I'm building right now. Just want a simple growing arrow like what you have on the buttons above.