Flat Ui Rollover Buttons

Developer
Saysora
Size
3,312 Kb
Views
50,600
  1. Flat Ui Rollover Buttons Previews
  2. Flat Ui Rollover Buttons HTML Codes
  3. Flat Ui Rollover Buttons CSS Codes
  4. Flat Ui Rollover Buttons JS Codes

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 Previews
IQ Test

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 */
Flat Ui Rollover Buttons - Script Codes
Flat Ui Rollover Buttons - Script Codes
Home Page Home
Developer Saysora
Username azureknight
Uploaded August 26, 2022
Rating 4.5
Size 3,312 Kb
Views 50,600
Do you need developer help for Flat Ui Rollover 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!

Saysora (azureknight) Script Codes
Name
Grow Circle Animation
Landscape Animation
Value vs Placeholder
Life Mottos
Legend of Zelda - Triforce
Simple Loading Bar
First Loading Animation
Responsive Background
CSS Full Width Content Menu
Info Cards
Create amazing Facebook ads 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!