Web Code
Login
Sign Up
HTML
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"> <a class="link" href="#" target="_blank"> <div class="color"></div> <span>READ MORE</span> <i class="fa-solid fa-arrow-right"></i> </a>
CSS
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap"); body { font-family: "Poppins", sans-serif; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #141414; padding: 1rem; } .link { font-size: 2rem; font-weight: bold; color: white; text-decoration: none; position: relative; scroll-behavior: smooth; } .link span, .link i { position: relative; } .link i { margin-left: 0.5em; } .link .color { width: 2em; height: 2em; border-radius: 2em; background-color: #3333ff; position: absolute; top: 50%; transform: translatey(-50%); left: -0.65em; }
JS
Output
