How to create animated button using html, css and javascript
<!DOCTYPE html>
<html>
<head>
<style>
body{
margin-left:0px;
}
.slide-button {
position: relative;
background-color: #4CAF50;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
outline: none;
}
.slide-button::before {
content: "";
position: absolute;
top: 0;
left: -100%;
height: 100%;
width: 100%;
background-color: #000;
transition: left 0.3s ease-out;
}
.slide-button:hover::before {
left: 0;
}
</style>
</head>
<body>
<button class="slide-button">Click me</button>
</body>
<script>
$(".slide-button").click(function() {
$(this).text("Button clicked");
});
</script>
</html>
This code creates a button with a green background color. When the button is hovered over, a black bar slides in from the left side and creating a neat animation effect. When the button is clicked, the text of the button changes to "Button clicked".
1 comments:
Click here for commentsI viewed your content on YouTube and read your content too. You provide really good content but the problem with your website is , it is not so attractive. Don't worry you can change your theme as in blogger. And we provide premium like igniplex v3 , gplay , story mag blogger templates for free. Download now and we have quality templates not so many , all are best for seo and we provide after too many researches , download from here - https://www.postforest.in/search/label/blogger%20premium%20templates | Go Now
Please do not entering spam link in the comment box ConversionConversion EmoticonEmoticon