Button With Hover Effect - Code With Bishal


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

animated button is a lightweight and easy-to-use HTML AND CSS code that creates a animated/hover button for you. In this blog [hover button], there are five sections on the webpage, in the first section you can get the overview of the blog, in the second section there are few more coding blogs you might like,in the third section you can see the demo of the button made with HTML and CSS, to view the fourth section click on the "View Code" button to reveal the code after that you can copy the code and paste it [that's the fifth section]

You might like this :

SIMPLE BUTTON USING HTML AND CSS
Few days ago
DIV ONLY VISIBLE ON HOVER USING HTML AND CSS
Few days ago
DIV ANIMATION USING HTML AND CSS
Few days ago


This is your demo button

HTML Code

<!DOCTYPE html>
<html>
<title>Animated Button by Code With Bishal</title>
<body>
<button class="button"><span>Button With Animation </span> </button>
</body>
</html>
Copy Contents

CSS Code

.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;
}

Copy Contents