SIMPLE NICE ANIMATED BUTTON
How do I make an simple nice animated button?
Simple nice animated button .. . What is a simple nice animated button? How do you make a simple nice animated button? This script and codes were developed by Vedat Sözen on 27 November 2022, Sunday.
SIMPLE NICE ANIMATED BUTTON - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SIMPLE NICE ANIMATED BUTTON</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="stil.css">
<link href='https://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://www.bitstorm.org/jquery/color-animation/jquery.animate-colors-min.js"></script>
<script src="stil.js"></script>
</head>
<body>
<div id="button">+</div>
</body>
</html>
</body>
</html>
SIMPLE NICE ANIMATED BUTTON - Script Codes CSS Codes
body {
margin:auto;
background: #48D1CC; }
#button {
height:50px;
width:50px;
margin:auto;
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
border:1px solid white;
border-radius: 300px;
background: white;
color: #48D1CC;
font-size: 30px;
font-weight: bold;
text-align: center;
line-height:50px;
transform:scale(1);
}
#button:hover { cursor: pointer; animation:click 0.3s ease-in-out; animation-iteration-count:1000;}
@keyframes click {
from { transform:scale(1);}
to { transform:scale(1); opacity:0.1; border:100px solid white;}
}
Developer | Vedat Sözen |
Username | vedatsozen |
Uploaded | November 27, 2022 |
Rating | 3 |
Size | 1,843 Kb |
Views | 16,192 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
MOBILE PHONE PAGE WITH SIMPLE ANIMATION | 2,479 Kb |
SIMPLE PROFILE PAGE by JAVASCRIPT | 2,050 Kb |
CHANGE BACKGROUND PHOTO WITH FORM | 2,389 Kb |
HOW TO CHANGE BACKGROUND IMAGE OF DIVS | 2,376 Kb |
SIMPLE FOOTBALL QUIZ .. | 2,467 Kb |
SIMPLE BILLIARD GAME TRIAL | 2,303 Kb |
PHOTO SLIDER | 2,364 Kb |
MATERIAL DESIGN BUTTON ANIMATION | 2,270 Kb |
SIMPLE ANIMATION | 1,774 Kb |
MATERIAL DESIGN BUTTON ANIMATION | 2,368 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
A Pen by Ben Babics | Benbabics | 2,957 Kb |
SlideDown FixedMenu | Mp_graphic | 5,602 Kb |
Under construction | GhostRider | 1,642 Kb |
Loading Bar | Jaradlight | 2,333 Kb |
Marching Squares Visualized | Sakri | 7,074 Kb |
Website Concept | Sagoza | 3,104 Kb |
Spinners using Font Icons | Keyamoon | 3,007 Kb |
Bezier Animation with straight paths | Rhernando | 2,087 Kb |
Birthday Party Starter | Aussieyang | 1,629 Kb |
A Pen by Sooba | Sooba | 2,516 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!