Learn how to make a animated button with the help of HTML5 AND CSS.
This is a animated "Button" Made With HTML and CSS By Code With Bishal . Just Copy The Code From Here And Paste It Into Your Website. To Preview the button scroll the page. If you are having any problem viewing the code just refresh the page or contact us
<!DOCTYPE html>
<html>
<title>Animated Button by Code With Bishal</title>
<body>
<button class="button"><span>Button With Animation </span> </button>
</body>
</html>
.button {
border-radius: 4px;
background-color: #9933ff; /* change this to change the background colour of button */
border: none;
color: #000066; /* change this to change the colour of text */
text-align: center;
font-size: 28px; /* change this to change the font size of the text */
padding: 20px;
width: 300px; /* change the width of the button */
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span::after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span::after {
opacity: 1;
right: 0;
}