FLAT UI ELEMENTS

Developer
Mayur Elbhar
Size
2,263 Kb
Views
14,168
  1. FLAT UI ELEMENTS Previews
  2. FLAT UI ELEMENTS HTML Codes
  3. FLAT UI ELEMENTS CSS Codes

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

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
Name
A Pen by Mayur Elbhar
Contact US Form
Contact Us Form
Typography Experiment
Typography Experiment 2 - Blurry Text
Social Media Icons
FLAT UI BUTTONS
Simple Text Shadow with CSS
Text-Shadow
A simple log in form made with css
Create amazing web content 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!