FLAT UI ELEMENTS

Developer
Size
2,263 Kb
Views
14,168

How do I make an flat ui elements?

Flat UI buttons & input boxes :)I was just trying to make something like this → http://designmodo.github.io/Flat-UI/. What is a flat ui elements? How do you make a flat ui elements? This script and codes were developed by Mayur Elbhar on 31 October 2022, Monday.

FLAT UI ELEMENTS Previews

FLAT UI ELEMENTS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>FLAT UI ELEMENTS</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="flat_UI_buttons"> <h1>FLAT UI BASIC ELEMENTS<span>*</span></h1> <div class="buttons"> <h6>Buttons:</h6> <button id="Primary">Primary</button> <button id="Success">Success</button> <button id="Danger">Danger</button> <button id="warning">warning</button> <button id="Default">Default</button> <button id="Info">Info</button> <button id="Inverse">Inverse</button> <button id="disabled" disabled="disabled">Disabled</button>
<div class="inputs"> <h6>Inputs:</h6> <input id="inactive" value="" placeholder="Inactive" type="text"> <input id="error" value="" placeholder="Error" type="text"> <input id="success" value="" placeholder="Success" type="text"> <input value="" placeholder="Disabled" disabled="disabled" type="text"> </div> </div>
</body>
</html>

FLAT UI ELEMENTS - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Fjalla+One);
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed);
body { background: #ffffff;
}
.flat_UI_buttons { font-family: 'Fjalla One', sans-serif; font-size: 30px; text-align: center; color: #546e7a;
}
.flat_UI_buttons span { color: #e84e40;}
.flat_UI_buttons h6 { text-align: left;
margin: 20px 0px 20px 105px;}
.flat_UI_buttons button { padding: 20px 50px; margin: auto; outline: none; border: none; font-family: 'Roboto Condensed', sans-serif; font-size: 15px; color: #fafafa; margin-bottom: 150px;
}
#Primary { background: #1abc9c;
}
#Primary:hover { background: #24d1af; transition: background-color 0.3s;
}
#Success { background: #2ecc71;
}
#Success:hover { background: #3edd82; transition: background-color 0.3s;
}
#Danger { background: #e74c3c;
}
#Danger:hover { background: #fa6c5d; transition: background-color 0.3s;
}
#Disabled { background: #d1d5d8; border: none;
}
#warning { background: #f1c40f;
}
#warning:hover { background: #fede5f; transition: background-color 0.3s;
}
#Info { background: #3498db;
}
#Info:hover { background: #50b3f5; transition: background-color 0.3s;
}
#Inverse { background: #34495e;
}
#Inverse:hover { background: #48617a; transition: background-color 0.3s;
}
#Default { background: #bdc3c7;
}
#Default:hover { background: #d1d4d6; transition: background-color 0.3s;
}
[type=text] { height: 45px; width: 250px; margin-top: 15px; margin-left: 25px; outline: none; font-family: 'Roboto Condensed', sans-serif; font-size: 15px; padding-left: 10px;
}
#inactive{ border: 2px solid #D5DBDB; color: #9e9e9e;
}
#error { border: 2px solid #e74c3c; color: #e74c3c;
}
#success { border: 2px solid #2ecc71; color: #2ecc71;
}
#disabled { border: 2px solid #d1d5d8; color: #d1d5d8;
}
FLAT UI ELEMENTS - Script Codes
FLAT UI ELEMENTS - Script Codes
Home Page Home
Developer Mayur Elbhar
Username mayurelbhar
Uploaded October 31, 2022
Rating 3
Size 2,263 Kb
Views 14,168
Do you need developer help for FLAT UI ELEMENTS?

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!

Mayur Elbhar (mayurelbhar) Script Codes
Create amazing blog posts 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!