CSS can be used to convert dull HTML forms into visually pleasing ones. You can set the height and width of the form elements as well define other CSS properties like padding, color, border, background along with hover effects too and make them look beautiful and succeed in inducing users to fill up those forms.
Buttons and links are other important user interfaces of a web page which must be made more prominent and visually pleasing to attract and induce users on clicking them. By default, browsers display links and buttons too plain which can be changed using CSS properties. Most often links are also displayed as buttons in web pages.
Here's an example of a login form.
Styling text input fields might be the easiest one when it comes to styling form elements with CSS. You need to define the width, padding, background and text colors.
<input type="text" name="" class="inputstyle" placeholder="Enter your Name">
<style>
.inputstyle{
width: 50%;
padding: 5px 10px;
background: #151f28;
border: 1px solid #ccc;
color: #fff;
margin-bottom: 10px;
}
</style>
Textareas can be styled the same way as you can style the input textboxes.
<textarea class="mytextarea" placeholder="Enter some texts here..."></textarea>
<style>
.mytextarea{
width: 50%;
height: 100px;
resize: none;
background: #151f28;
color: #fff;
padding: 10px;
}
</style>
Styling input type checkbox is not easy though. You will need to hide the original one and display content you want to appear on your web page. Then, you need to add more style todisplay content on check.
<label class="checkbox-label">
<input type="checkbox" checked>
<span class="custom-checkbox-style"></span> Remember me
</label>
<style>
.checkbox-label{
cursor: pointer;
display: block;
position: relative;
padding-left: 25px;
}
.checkbox-label input{
display: none;
}
.custom-checkbox-style {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
border: 1px solid #d7d7d7;
}
.custom-checkbox-style:hover{
box-shadow: 0 0 3px #999;
}
.checkbox-label input:checked ~ .custom-checkbox-style{
background: #151f28;
}
.custom-checkbox-style:after {
content: "";
position: absolute;
display: none;
left: 6px;
top: 2px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.checkbox-label input:checked ~ .custom-checkbox-style:after {
display: block;
}
</style>
You can style radio buttons too with CSS the same way the checkbox is styled.
<label class="radio-label">
<input type="radio" name="gender" checked>
<span class="custom-radio"></span> Male
</label>
<label class="radio-label">
<input type="radio" name="gender">
<span class="custom-radio"></span> Female
</label>
<style>
.radio-label {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
}
.radio-label input {
display: none;
}
.custom-radio {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
border: 1px solid #d7d7d7;
border-radius: 50%;
}
.radio-label:hover input ~ .custom-radio {
box-shadow: 0 0 3px #999;
}
.radio-label input:checked ~ .custom-radio {
background: #151f28;
}
.custom-radio:after {
content: "";
position: absolute;
display: none;
top: 5px;
left: 5px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}.radio-label input:checked ~ .custom-radio:after {
display: block;
}
</style>
Buttons are used in web pages not only for forms but most often for links too. You can style the <input type="submit"> or <button> as well as <a> element to make them appear as a button in web pages.
<a href="#" class="button">Button</a>
<style>
.button {
padding: 6px 12px;
font-size: 14px;
color: #fff;
background: #151f28;
border: 1px solid #151f28;
border-radius: 4px;
cursor: pointer;
}
.button:hover{
color: #fff;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
</style>
These are the button styles you see most often in web pages.
<p>
<button class="button green">Green</button>
<button class="button lightblue">Light Blue</button>
<button class="button darkblue">Dark Blue</button>
<button class="button orange">Orange</button>
<button class="button red">Red</button>
</p>
<style>
.green{
background: #5cb85c;
border: 1px solid #4cae4c;
}
.green:hover{
background: #4cae4c;
border: 1px solid #5cb85c;
}
.lightblue{
background: #5bc0de;
border: 1px solid #46b8da;
}
.lightblue:hover{
background: #46b8da;
border: 1px solid #5bc0de;
}
.darkblue{
background: #337ab7;
border: 1px solid #2e6da4;
}
.darkblue:hover{
background: #2e6da4;
border: 1px solid #337ab7;
}
.orange{
background: #f0ad4e;
border: 1px solid #eea236;
}
.orange:hover{
background: #eea236;
border: 1px solid #f0ad4e;
}
.red{
background: #d9534f;
border: 1px solid #d43f3a;
}
.red:hover{
background: #d43f3a;
border: 1px solid #d9534f;
}
</style>
You can also define the button width with CSS property width along with text aligned to the center. By default the button takes up the content with along with the padding and the border width.
Leave a comment