Flat animated buttons

Developer
Roman Budnikov
Size
3,210 Kb
Views
6,072
  1. Flat animated buttons Previews
  2. Flat animated buttons HTML Codes
  3. Flat animated buttons CSS Codes
  4. Flat animated buttons JS Codes

How do I make an flat animated buttons?

Some flat animated buttons. What is a flat animated buttons? How do you make a flat animated buttons? This script and codes were developed by Roman Budnikov on 20 January 2023, Friday.

Flat animated buttons Previews
IQ Test

Flat animated buttons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>flat animated buttons</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1> Flat animated buttons
</h1>
<div class="contaner"> <button class="btn btn-default">Default</button>
</div>
<div class="contaner"> <button class="btn btn-primary">Primary</button>
</div>
<div class="contaner"> <button class="btn btn-danger">Danger</button>
</div>
<div class="contaner"> <button class="btn btn-success">Success</button>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Flat animated buttons - Script Codes CSS Codes

body { font-family: Consolas, Monaco, monospace;
}
h1 { text-align: center;
}
.contaner { margin: 25px auto; width: 150px; height: 30px;
}
.contaner .btn { width: 100%;
}
.btn { font-family: Consolas, Monaco, monospace; font-size: 16px; padding: 5px 10px; border: none; outline: none; border-radius: 5px;
}
.btn:hover { -webkit-animation: btnHover 0.5s; animation: btnHover 0.5s; -webkit-transition: background 0.5s; transition: background 0.5s;
}
.btn:active { -webkit-transition: background 0.5s, font-size 0.5s; transition: background 0.5s, font-size 0.5s; font-size: 1.6px; -webkit-animation: btnClick 0.5s; animation: btnClick 0.5s;
}
.btn.btn-default { background: #d3d3d3; color: #7a7a7a;
}
.btn.btn-default:hover { background: #bababa;
}
.btn.btn-default:active { background: #ededed;
}
.btn.btn-primary { background: #3EA0FF; color: #00468b;
}
.btn.btn-primary:hover { background: #0b87ff;
}
.btn.btn-primary:active { background: #71b9ff;
}
.btn.btn-danger { background: #e74c3c; color: #64150c;
}
.btn.btn-danger:hover { background: #d62c1a;
}
.btn.btn-danger:active { background: #ed7669;
}
.btn.btn-success { background: #2ac56c; color: #0b321b;
}
.btn.btn-success:hover { background: #219b55;
}
.btn.btn-success:active { background: #4ad886;
}
@-webkit-keyframes btnHover { 0% { -webkit-transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1); } 25% { -webkit-transform: rotate(-10deg) scale(1.5); transform: rotate(-10deg) scale(1.5); } 100% { -webkit-transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1); }
}
@keyframes btnHover { 0% { -webkit-transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1); } 25% { -webkit-transform: rotate(-10deg) scale(1.5); transform: rotate(-10deg) scale(1.5); } 100% { -webkit-transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1); }
}
@-webkit-keyframes btnClick { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: rotate(-360deg) scale(0.1); transform: rotate(-360deg) scale(0.1); }
}
@keyframes btnClick { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: rotate(-360deg) scale(0.1); transform: rotate(-360deg) scale(0.1); }
}

Flat animated buttons - Script Codes JS Codes

(function() {
}).call(this);
Flat animated buttons - Script Codes
Flat animated buttons - Script Codes
Home Page Home
Developer Roman Budnikov
Username supro
Uploaded January 20, 2023
Rating 3
Size 3,210 Kb
Views 6,072
Do you need developer help for Flat animated buttons?

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!

Roman Budnikov (supro) Script Codes
Name
Css chat
Letter
404 page
Rodeo-004 example
Compact menu
App header
Rating
AngularJS Skills
Foundle.com redesign
Flex barcket
Create amazing art & images with AI!

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!