JSFiddle - React, Tailwind, and code Playground

FULL CSS 3 UI KIT

by Jennifer Perrin

HTML

<div class="left">
			<h4> ROUNDED BUTTONS </h4>
			<div> 
				<div class="roundedBorder BorderWhite">
					<a href="#" class="roundedInterior btnWhite">WHITE</a>
				</div>
				<div class="roundedBorder BorderBlack">
					<a href="#" class="roundedInterior btnBlack">BLACK</a>
				</div>
				<div class="roundedBorder BorderBlue">
					<a href="#" class="roundedInterior btnWhite">WHITE &amp; BLUE</a>
				</div>
				<div class="roundedBorder BorderRed">
					<a href="#" class="roundedInterior btnWhite">WHITE &amp; RED</a>
				</div>
				<div class="roundedBorder BorderGreen">
					<a href="#" class="roundedInterior btnWhite">WHITE &amp; GREEN</a>
				</div>
				<div class="roundedBorder BorderBlue">
					<a href="#" class="roundedInterior btnBlue">BLUE</a>
				</div>
				<div class="roundedBorder BorderRed">
					<a href="#" class="roundedInterior btnRed">RED</a>
				</div>
				<div class="roundedBorder BorderGreen">
					<a href="#" class="roundedInterior btnGreen">GREEN</a>
				</div>
			</div>
		</div>
		<div class="left">
			<h4> SEMI-ROUNDED BUTTONS </h4>
			<div> 
				<div class="semiRoundedBorder BorderWhite">
					<a href="#" class="semiRoundedInterior btnWhite">WHITE</a>
				</div>
				<div class="semiRoundedBorder BorderBlack">
					<a href="#" class="semiRoundedInterior btnBlack">BLACK</a>
				</div>
				<div class="semiRoundedBorder BorderBlue">
					<a href="#" class="semiRoundedInterior btnWhite">WHITE &amp; BLUE</a>
				</div>
				<div class="semiRoundedBorder BorderRed">
					<a href="#" class="semiRoundedInterior btnWhite">WHITE &amp; RED</a>
				</div>
				<div class="semiRoundedBorder BorderGreen">
					<a href="#" class="semiRoundedInterior btnWhite">WHITE &amp; GREEN</a>
				</div>
				<div class="semiRoundedBorder BorderBlue">
					<a href="#" class="semiRoundedInterior btnBlue">BLUE</a>
				</div>
				<div class="semiRoundedBorder BorderRed">
					<a href="#" class="semiRoundedInterior btnRed">RED</a>
				</div>
				<div...

CSS

/*---------------------IMPORTANT INFORMATIONS ---------------------
Those buttons have been made to be compatible with all browsers in a lot of versions.

To use those buttons you need to choose 3 parameters :
- button template : rounded, semi-rounded, or quared button
- Border color : the color of the external stroke of the button
- button color : the color of the internal part of the button

You also have Serchfield + button, and socialbutton + icon possibilities

those 3 parameters will allow you to make endless possibilites of shapes and colors.
Then, you will be able to easly change radius size, button height and weight, font parameters ...

/!\ Some properties are repeated in each class; this have been made to allow you to use each class independently /!\

have fun, and contact me if you have any problem with this stuff (don't forget to rate if you like).*/



/*---------------------IMPORTANT GENERAL PARAMETERS---------------------*/

a			{text-decoration: none;outline: none;}
a:visited 	{text-decoration: none;}
a:hover 	{text-decoration: none;}
a:active 	{text-decoration: none;}


/*---------------------BUTTONS TEMPLATE---------------------*/

/*rounded buttons*/
.roundedBorder {
	width: 160px;
	padding: 6px;
	-moz-box-sizing:border-box;		/*The box-sizing property allows you to define certain elements to fit an area in a certain way */
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
	
	-moz-border-radius:		30px;	/* FF3.5+ */	
	-webkit-border-radius:	30px;	/* Chrome,Safari3+ */
	-o-border-radius: 		30px;	/* Opera 10.5+ */
	border-radius:			30px;	/* W3C */	
}

.roundedInterior {
	display: block;
	height: 35px;
	-moz-box-sizing:border-box;		/*The box-sizing property allows you to define certain elements to fit an area in a certain way */
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    
	font-size: 14px;
	text-align: center;
	line-height: 35px;
	font-weight: bold;
	font-family:helvetica,trebuchet MS,...