PC & IT SUPPORT MADE EASY FORUM
Would you like to react to this message? Create an account in a few clicks or log in to continue.

A link Button Styling With Effects

Go down

A link Button Styling With Effects Empty A link Button Styling With Effects

Post 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>
jamied_uk
jamied_uk
Admin

Posts : 2950
Join date : 2010-05-09
Age : 41
Location : UK

https://jnet.sytes.net

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum