A link Button Styling With Effects

by jamied_uk 10th March 2023, 13:50

Code:: <style> .my-div a:link, a:visited { max-width: 600px; font-size: small; background-color: DodgerBlue; color: white; padding: 7px 15px; text-align: center; text-decoration: none; display: inline-block; width: 200px; /* set a width to make the button longer */ text-align: center; align-items: center; display: flex; justify-content: center; -webkit-transition:opacity 0.5s linear 0s; transition:opacity 0.5s linear 0s; } .my-div a:hover, a:active { background-color: green; width: 200px; /* set a width to make the button longer */ opacity:1; transition: box-shadow 1200ms ease-in; -webkit-transition: box-shadow 1200ms ease-in; -webkit-box-shadow: 0px 0px 15px 10px rgba(255, 255, 255, .75); box-shadow: 0px 0px 15px 10px rgba(255, 255, 255, .75); } body { background-color: #1a1a1a; font-family: Arial, sans-serif; } </style> <div class="my-div"> <p><a href="view_messages.php">View Encrypted Message</a></p> </div>