Flat Ui Rollover Buttons
How do I make an flat ui rollover buttons?
I just wanted to do a nice mockup of a rollover effect using all the Flat Ui Colors. Thanks to @rexkirby for the ease effect.. What is a flat ui rollover buttons? How do you make a flat ui rollover buttons? This script and codes were developed by Saysora on 26 August 2022, Friday.
Flat Ui Rollover Buttons - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flat Ui Rollover Buttons</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="wrap"> <h1 class="title">Flat Ui Rollover Buttons</h1> <div class="linkbutton"> <h2>turqoise</h2> <div class="ease turquoise"></div> </div> <div class="linkbutton"> <h2>green sea</h2> <div class="ease greensea"></div> </div> <div class="linkbutton"> <h2>emerald</h2> <div class="ease emerald"></div> </div> <div class="linkbutton"> <h2>nephritis</h2> <div class="ease nephritis"></div> </div> <div class="linkbutton"> <h2>peter river</h2> <div class="ease peterriver"></div> </div> <div class="linkbutton"> <h2>belize hole</h2> <div class="ease belizehole"></div> </div> <div class="linkbutton"> <h2>amethyst</h2> <div class="ease amethyst"></div> </div> <div class="linkbutton"> <h2>westeria</h2> <div class="ease westeria"></div> </div> <div class="linkbutton"> <h2>wet asphalt</h2> <div class="ease wetasphalt"></div> </div> <div class="linkbutton"> <h2>midnight blue</h2> <div class="ease midnightblue"></div> </div> <div class="linkbutton"> <h2>sunflower</h2> <div class="ease sunflower"></div> </div> <div class="linkbutton"> <h2>orange</h2> <div class="ease orange"></div> </div> <div class="linkbutton"> <h2>carrot</h2> <div class="ease carrot"></div> </div> <div class="linkbutton"> <h2>pumpkin</h2> <div class="ease pumpkin"></div> </div> <div class="linkbutton"> <h2>alizarin</h2> <div class="ease alizarin"></div> </div> <div class="linkbutton"> <h2>pomegranate</h2> <div class="ease pomegranate"></div> </div> <div class="linkbutton nohover"> <h2>clouds</h2> <div class="ease clouds"></div> </div> <div class="linkbutton nohover"> <h2>silver</h2> <div class="ease silver"></div> </div> <div class="linkbutton"> <h2>concrete</h2> <div class="ease concrete"></div> </div> <div class="linkbutton"> <h2>abestos</h2> <div class="ease abestos"></div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>
Flat Ui Rollover Buttons - Script Codes CSS Codes
* { margin: 0; padding: 0;
}
body { font-family: "Helvetica"; background: #34495e;
}
#wrap { margin: 25px auto; width: 770px; padding: 10px;
}
.title { color: #fff; text-align: center; margin: 10px;
}
.linkbutton { width: 350px; height: 100px; background: #ecf0f1; cursor: pointer; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; transition: all 0.6s ease; display: inline-block; margin: 10px;
}
.linkbutton h2 { float: left; width: 350px; height: 65px; text-align: center; margin-top: 35px; font-weight: 100; text-transform: uppercase;
}
.linkbutton:hover { color: #fff; background: none;
}
.ease { width: 0; background: #282828; height: 100px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.linkbutton:hover .ease { width: 100%;
}
.nohover:hover { color: #000;
}
/* Flat Ui Colors */
.turquoise { background: #1abc9c;
}
.greensea { background: #16a085;
}
.emerald { background: #2ecc71;
}
.nephritis { background: #27ae60;
}
.peterriver { background: #3498db;
}
.belizehole { background: #2980b9;
}
.amethyst { background: #9b59b6;
}
.westeria { background: #8e44ad;
}
.wetasphalt { background: #34495e;
}
.midnightblue { background: #2c3e50;
}
.sunflower { background: #f1c40f;
}
.orange { background: #f39c12;
}
.carrot { background: #e67e22;
}
.pumpkin { background: #d35400;
}
.alizarin { background: #e74c3c;
}
.pomegranate { background: #c0392b;
}
.clouds { background: #ecf0f1;
}
.silver { background: #bdc3c7;
}
.concrete { background: #95a5a6;
}
.abestos { background: #7f8c8d;
}
Flat Ui Rollover Buttons - Script Codes JS Codes
/* Ease Effect is thanks to @rexkirby . Check out his pens for neat effects. Colors and Flat UI is property of DesignModo + Flat UI */
Developer | Saysora |
Username | azureknight |
Uploaded | August 26, 2022 |
Rating | 4.5 |
Size | 3,312 Kb |
Views | 50,600 |
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 |
Legend of Zelda - Triforce | 2,530 Kb |
CSS Tab Holder | 3,445 Kb |
Info Cards | 3,926 Kb |
CSS Full Width Content Menu | 3,712 Kb |
Landscape Animation | 3,469 Kb |
CSS Browser | 2,611 Kb |
First Loading Animation | 2,886 Kb |
Flat Ui Rollover Buttons | 3,312 Kb |
Flat UI Login | 3,358 Kb |
Simple Loading Bar | 2,513 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 |
Vanilla JS - A toggleClass function | Woodwork | 2,532 Kb |
Snow collision | Wojtek1150 | 3,542 Kb |
Dragonball Dragon Radar | DouglasGlover | 2,157 Kb |
Tab Menus | Zephyr | 3,180 Kb |
Flexbox slider | Rendro | 3,459 Kb |
Cut and Paste Roll Link | BottomlineInteractive | 2,546 Kb |
Popover | Teles | 2,248 Kb |
Waveform function for a siren tone modulation | Clafou | 1,656 Kb |
Draggable directive | YahyaKacem | 2,277 Kb |
Wikipedia Viewer | Thalpha | 4,426 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!