Everything 4 PC: Awesome Buttons

Create Awesome Signup Form with simple CSS

Form are the main components in any websites. Forms are interface between the user and the server. If there are no forms then there is no interaction between the user and the server. There are a plenty of form element types in HTML. Here I will take a few of them and create a simple Sign up form. So let's get started.

formelements.html
<!DOCTYPE html>
<html>
<head>
<title>Buttons</title>
<link rel="stylesheet" type="text/css" href="formelements.css">
</head>
<body>
<div id="container">

<form method="post" action="formelements.html">
<label>SignUp</label><br><br>
<input type="text" placeholder="Username" class="textBox"/><br>
<input type="email" placeholder="Email" class="textBox" /><br>
<input type="password" placeholder="Password" class="textBox" /><br><br>
<input type="radio" name="gender" class="radioBtn" /> <span class="outsideText">Male</span>
<input type="radio" name="gender" class="radioBtn" /> <span class="outsideText">Female</span><br>
<input type="checkbox" class="checkBox" /> <span class="outsideText">I agree to the terms and
conditions of this website. This is some dummy lorem Ipsum text.</span><br>
<input type="submit" value="Sign up" id="submitBtn" />
</form>

</div>

</body>

</html>

formelements.css
form {
width:500px;
padding:8px;
border:1px solid #cccccc;
}
label {
font-size:24px;
font-family:calibri;
color:red;
text-shadow:2px 2px 1px #cccccc;
padding:6px;
font-weight:700;
}
.textBox {
width:320px;
padding:10px;
font-size:18px;
font-family:calibri;
outline:none;
border:4px solid #00bbaf;

}
.outsideText {
font-size:18px;
font-family:calibri;
}
#submitBtn {
width:160px;
padding:6px;
background:orange;
border:1px solid orange;
color:#ffffff;
font-size:18px;
font-family:calibri;
margin-top:6px;

}

The form looks in this way

Here due to image resolution the image looks pretty much dim. Trust me if you copy and paste the code and check in your screens it looks more pretty, Again play with all the different styles above, try changing the values. If any doubts don't hesitate to comment below. I am always ready to clear your queries.

Awesome Rounded corner Button with simple HTML and CSS

First I will provide the code and then I will explain about the important things in the code.

buttons.html
<DOCTYPE html>
<html>
<head>
<title>Buttons</title>
<link rel="stylesheet" type="text/css" href="buttons.css">
</head>
<body>
<div id="container">
<button id="buttonType">Button tag Button</button><br><br>
</div>

</body>
</html>

buttons.css
/*Button Type Button Styling*/
#buttonType {
padding:6px;
background:transparent;
color:#9037cf;
font-family:calibri;
font-size:20px;
border:1px solid #9037cf;
border-radius:10px;
-webkit-transition:background .3s,color .3s;
-moz-transition:background .3s,color .3s;
-ms-transition:background .3s,color .3s;
-0-transition:background .3s,color .3s;
transition:background .3s,color .3s;

}
#buttonType:hover{
cursor:pointer;
background:#9037cf;
color:#ffffff;
}

/*Button Type Button Styling End*/

output

I hope you can pretty much understand the above code. Let me explain about transition property.
transition is CSS3 property used to animate simple things. Here we have made different transition lines with different suffixes that is because for the cross browser compatibilities.

If any queries comment below. I will answer for each query.

Stay tuned for more tips and tricks.

Pages

March 28, 2015

Create Awesome Signup Form with simple CSS

Awesome Rounded corner Button with simple HTML and CSS

Create Buttons with different tags in html