FLAT UI BUTTONS

Developer
Mayur Elbhar
Size
2,529 Kb
Views
18,216
  1. FLAT UI BUTTONS Previews
  2. FLAT UI BUTTONS HTML Codes
  3. FLAT UI BUTTONS CSS Codes

How do I make an flat ui buttons?

Flat UI buttons with hover effect, made with CSS using my very fresh HTML CSS knowledge :) and yes, this is my first code :). What is a flat ui buttons? How do you make a flat ui buttons? This script and codes were developed by Mayur Elbhar on 31 October 2022, Monday.

FLAT UI BUTTONS Previews
IQ Test

FLAT UI BUTTONS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>FLAT UI BUTTONS</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container">
<div id="heading"><h2>FLAT UI BUTTONS </h2>
<p>Version 1.0</p> </div>
<div class="rectangular"> <h3>Rectangular</h3> <button id="Flamingo">CLICK ME </button> <button id="Picton">CLICK ME</button> <button id="Gossip">CLICK ME</button> <button id="Edward">CLICK ME</button> <button id="Sandstorm">CLICK ME</button>
</div>
<div class="rectangular_2"> <button id="Flamingo_2">CLICK ME</button> <button id="Picton_2">CLICK ME</button> <button id="Gossip_2">CLICK ME</button> <button id="Edward_2">CLICK ME</button> <button id="Sandstorm_2">CLICK ME</button>
</div>
<div class="round"> <h3>Pill Shaped</h3> <button id="Flamingo">CLICK ME</button> <button id="Picton">CLICK ME</button> <button id="Gossip">CLICK ME</button> <button id="Edward">CLICK ME</button> <button id="Sandstorm">CLICK ME</button>
</div>
<div class="round_2"> <button id="Flamingo_2">CLICK ME</button> <button id="Picton_2">CLICK ME</button> <button id="Gossip_2">CLICK ME</button> <button id="Edward_2">CLICK ME</button> <button id="Sandstorm_2">CLICK ME</button>
</div>
<div id="footer">
<div id="credit"><p>Designed by → <a href="https://www.twitter.com/MayurElbhar">Mayur Elbhar (ME)</a> </div>
</div>
</div>
</div>
</body>
</html>

FLAT UI BUTTONS - Script Codes CSS Codes

/*---------BODY-----------------------*/
body { background-color: #dedede;
}
/*------Container----------------------*/
.container { overflow: hidden;
}
/*-----------TITLES-------------------*/
/*-------heading--------*/
#heading h2 { font-family: Segoe UI; font-size: 35px; color: #242525; margin: 15px 10px 5px 50px; text-align: center;
}
#heading p { text-align: center; font-family: Segoe UI; font-size: 18px; color: #105cb1; text-shadow: none;
} h3 { font-family: segoe UI; color: #fff; color: #242525; text-decoration: underline;
}
/*------all button style--------*/
button:hover { cursor: pointer; transition: background-color 0.5s, color 0.5s;
}
/*------Rectangular Buttons-----------*/
.rectangular button { padding: 15px 64px; margin: 30px 25px 30px 25px; display: inline-block; font-family: segoe UI; font-size: 14px; outline: none; color: #fff; font-weight: bold;
}
/*----------Rectangular Buttons 2 ----------*/
.rectangular_2 button { padding: 15px 64px; margin: 30px 25px 30px 25px; display: inline-block; font-family: segoe UI; font-size: 14px; outline: none; color: #fff; font-weight: bold;
}
/*-------Round Buttons------------*/
.round button { padding: 15px 64px; margin: 30px 25px 30px 25px; display: inline-block; font-family: segoe UI; font-size: 14px; outline: none; color: #fff; border-radius: 40px;
}
/*-------Round Buttons 2------------*/
.round_2 button { padding: 15px 64px; margin: 30px 25px 30px 25px; display: inline-block; font-family: segoe UI; font-size: 14px; outline: none; color: #fff; border-radius: 30px; font-weight: bold;
}
/*-----------button style--------*/
#Flamingo { background: #ef4836; border: 2px solid #ef4836;
}
#Flamingo:hover { background: #fff; border-color: #ef4836; color: #ef4836;
}
#Flamingo:active { background: #fff; border-color: #fff;
}
#Picton { background: #59abe3; border: 2px solid #59abe3; font-weight: bold;
}
#Picton:hover { background: #fff; color: #59abe3;
}
#Picton:active { background: #fff; border-color: #fff;
}
#Gossip { background: #87d37c; border: 2px solid #87d37c; font-weight: bold;
}
#Gossip:hover { background: #fff; color: #87d37c;
}
#Gossip:active { background: #fff; border-color: #fff;
}
#Edward { background: #abb7b7; border: 2px solid #abb7b7; font-weight: bold;
}
#Edward:hover { background: #fff; color: #abb7b7;
}
#Edward:active { background: #fff; border-color: #fff;
}
#Sandstorm { background: #f9bf3b; border: 2px solid #f9bf3b; font-weight: bold;
}
#Sandstorm:hover { background: #fff; color: #f9bf3b;
}
#Sandstorm:active { background: #fff; border-color: #fff;
}
/*-----------=====================---------*/
#Flamingo_2 { background: #fff; border: 2px solid #ef4836; color: #ef4836;
}
#Flamingo_2:hover { background: #ef4836; border-color: #ef4836; color: #fff;
}
#Flamingo_2:active { background: #ef4836; border-color: #fff;
}
#Picton_2 { background: #fff; border: 2px solid #59abe3; color: #59abe3;
}
#Picton_2:hover { background: #59abe3; color: #fff;
}
#Picton_2:active { background: #59abe3; border-color: #fff;
}
#Gossip_2 { background: #fff; border: 2px solid #87d37c; color: #87d37c;
}
#Gossip_2:hover { background: #87d37c; color: #fff;
}
#Gossip_2:active { background: #87d37c; border-color: #fff;
}
#Edward_2 { background: #fff; border: 2px solid #abb7b7; color: #abb7b7;
}
#Edward_2:hover { background: #abb7b7; color: #fff;
}
#Edward_2:active { background: #abb7b7; border-color: #fff;
}
#Sandstorm_2 { background: #fff; border: 2px solid #f9bf3b; font-weight: bold; color: #f9bf3b;
}
#Sandstorm_2:hover { background: #f9bf3b; color: #f9bf3b; color: #fff;
}
#Sandstorm_2:active { background: #f9bf3b; border-color: #fff;
}
/*-------FOOTER--------*/
#credit { text-align: center; margin-top: 50px; font-family: Segoe UI;
}
#credit a { text-decoration: none; font-family: Mistral; font-size: 20px; color: #105cb1;
}
FLAT UI BUTTONS - Script Codes
FLAT UI BUTTONS - Script Codes
Home Page Home
Developer Mayur Elbhar
Username mayurelbhar
Uploaded October 31, 2022
Rating 3
Size 2,529 Kb
Views 18,216
Do you need developer help for FLAT UI 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!

Mayur Elbhar (mayurelbhar) Script Codes
Name
Hamburger menu prototypes
Typography Experiment
Contact Us Form
A Pen by Mayur Elbhar
Contact US Form
Buttons with Google material design icons.
Simple Text Shadow with CSS
Website Layout 1
FLAT UI ELEMENTS
Social Media Icons
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!