Template Name: Pure CSS Custom Outlined Square Buttons.
High Resolution:&nbsp;&ndash; Yes.
Compatible Browsers:&nbsp;&ndash;&nbsp;All Browser.
Source Files included:&nbsp;&ndash; HTML and Internal CSS.
Buttons&nbsp;are mostly used on a website to show an action after the click. So here we designed it simply with a custom&nbsp;Outlined Square Button in pure CSS.
We designed different types of attractive buttons in bootstrap, angular material and also in&nbsp;pure CSS.&nbsp; In these elements, we used css3 properties to make our button elements more attractive and cool. Here we simply used background colour and also use hover effects on mouse hover with border properties. These are responsive elements for all devices like mobile and tablets.
Make it yours now by using it, downloading it and please share it. we will design more elements for you.

Demo

Download Now

Buttons are mostly used on a website to show an action after the click. So here we designed it simply with a custom Outlined Square Button in pure CSS.

Pure CSS Custom Outlined Square Buttons

Template Name: Login Form Using Skeleton CSS.
High Resolution:&nbsp;&ndash; Yes.
Compatible Browsers:&nbsp;&ndash;&nbsp;All Browser.
Source Files included:&nbsp;&ndash; HTML, Internal CSS, and CDN.
Previously we designed so many login forms in different frameworks and also in pure CSS. So here we used&nbsp;<a href="http://getskeleton.com/" target="_blank" rel="noreferrer noopener">Skeleton CSS</a>&nbsp;to make this login form element.
<h3>What is&nbsp;Skeleton CSS?</h3>
Skeleton CSS&nbsp;is a lightweight CSS&nbsp;framework to design your web page using simple documentation. This is a responsive CSS framework with limited components like form, table, buttons,&nbsp;typography, and grid and also a basic and useful class. This is not a UI-based framework, just for a&nbsp;smaller project and you have to write your own custom CSS with minimal features.&nbsp;
In this&nbsp;<a href="../../?s=login+form" target="_blank" rel="noreferrer noopener">Login Form</a>,&nbsp;we used a simple grid class and utilities class to make this user-interface beautiful. Here we modify button classes to our own colour also we used media queries to make our element responsive and user-friendly.&nbsp;
Make it yours now by using it, downloading it and please share it. we will design more elements for you.

Skeleton CSS is a lightweight CSS framework to design your web page using simple documentation. This is a responsive CSS framework with limited components like form, table, buttons, typography, and grid and also a basic and useful class.

Login Form Using Skeleton CSS

Template Name: Team Section Using Materialize CSS.
High Resolution:&nbsp;&ndash; Yes.
Compatible Browsers:&nbsp;&ndash;&nbsp;All Browser.
Source Files included:&nbsp;&ndash; HTML, Internal CSS, Images and CDN.
Team section&nbsp;main section to show your mini-bio with a short intro. So here we designed the Simple team section using&nbsp;Materialize&nbsp;CSS&nbsp;with some basic CSS3 properties.
We have some elements in&nbsp;<a href="../../category/materialize-css/">materialize CSS</a>&nbsp;with awesome&nbsp;materialize framework classes. So we design team sections using a grid with card classes and also utility classes of this framework. Here we used font awesome icons to show social icons under buttons and also we used hover classes to make our element hoverable. To make this team section fully responsive we used media queries to the side of a particular screen.&nbsp;
Make it yours now by using it, downloading it and please share it. we will design more elements for you.

Team section main section to show your mini-bio with a short intro. So here we designed the Simple team section using Materialize CSS with some basic CSS3 properties.

Team Section Using Materialize CSS

Template Name: Contact Us Form Using Angular Material.
High Resolution:&nbsp;&ndash; Yes.
Compatible Browsers:&nbsp;&ndash;&nbsp;All Browser.
Source Files included:&nbsp;&ndash; HTML, External CSS, and Angular CLI.
Contact us&nbsp;is most important for a user to coordinate with a website owner to ask a question or for feedback. So here we designed&nbsp;the&nbsp;Contact Us Form Using Angular Material&nbsp;UI base component library. Also, we some CSS3 and customized angular materials components and modify CSS.
We love to design something new using the latest and trending frameworks like&nbsp;<a href="../category/material-angular/">Angular</a>. So here we used an Angular material UI component framework and some cool CSS properties like flexbox. To make this component responsive we used media queries to some particular px side like after tablets. Here customized angular material buttons and also used mat-icons in the mat-input field side.&nbsp; Here we also modify placeholder and outline colours and also colour on entering text type.&nbsp;
Make it yours now by using it, downloading it and please share it. we will design more elements for you.

Contact us is most important for a user to coordinate with a website owner to ask a question or for feedback. So here we designed the Contact Us Form Using Angular Material UI base component library.

Contact Us Form Using Angular Material

Template Name: Login Form In Pug.
High Resolution:&nbsp;&ndash; Yes.
Compatible Browsers:&nbsp;&ndash;&nbsp;All Browser.
Source Files included: &ndash; Pug Cli, External CSS, and Image.
<a href="https://pugjs.org/" target="_blank" rel="noreferrer noopener">Pug&nbsp;</a>is an HTML template engine that is built in Node.js with easy-to-write code.&nbsp;One of the most popular HTML template engines directs compilation and generates an HTML file.&nbsp; Pug&nbsp;has a top-level of features like loop, conditions, operate, mixins and also different types of written tags. So here we designed a&nbsp;simple login form using Pug&nbsp;with some basic CSS.
In these elements, we used font awesome icons in our social button and also used background RGB colour to show the best user interface.&nbsp; To make our login form responsive we used css3 media queries and also used CSS3 flexbox properties.&nbsp;
Note:-&nbsp;To run the Pug file you have to install node js and pug Cli.&nbsp;

Pug is an HTML template engine that is built in Node.js with easy-to-write code. One of the most popular HTML template engines directs compilation and generates an HTML file.

Login Form In Pug

Template Name: Angular Material Side Navbar.
High Resolution:&nbsp;&ndash; Yes.
Compatible Browsers:&nbsp;&ndash;&nbsp;All Browser.
Source Files included:&nbsp;&ndash; HTML, External CSS, and Angular CLI.
Side Navbar&nbsp;is mostly using a dynamic website with multiple item lists. So here we designed the same&nbsp;Responsive&nbsp;Side Navbar In Angular&nbsp;Material&nbsp;with some cool CSS properties.
Previously we designed different types of elements in&nbsp;<a href="../category/material-angular/">Angular Material</a>. Here we use a material list and mat-icon with side nav UI components. Also, we modify and reused angular material classes and use our own classes to make this beautiful element more attractive.&nbsp; This is a fully responsive site navbar without using any single line of media queries. Here you can check how this side navbar works on click on mat-icon.&nbsp;This mostly responsive&nbsp;Calculator with mobile and tablet friendly.&nbsp;
Make it yours now by using it, downloading it and please share it. we will design more elements for you.

Side Navbar is mostly using a dynamic website with multiple item lists. So here we designed the same Responsive Side Navbar In Angular Material with some cool CSS properties.

Angular Material Side Navbar

Template Name: Calculator In Javascript With Bootstrap 4.
High Resolution:&nbsp;&ndash; Yes.
Compatible Browsers:&nbsp;&ndash;&nbsp;All Browser.
Source Files included: &ndash; HTML, External CSS and CDN.
The&nbsp;calculator&nbsp;is everything for us to calculate any amount into plus(+), minus(-),&nbsp;multiply(*) and divide(/) easily.&nbsp; Also, use as an advanced scientific calculator to calculate&nbsp;advanced mathematical expressions. So here we designed a Simple and good user-interface&nbsp;calculator In Javascript&nbsp;With Bootstrap 4 CSS framework. This element you can use in your project where have some basic calculations.&nbsp;
In this example, we used the javascript function to make this awesome&nbsp;calculator calculate the number that the user can enter with given numeric values. Here we used the Bootstrap 4 grid column and also use helper classes which bootstrap provides. Also, we change a little bit user interface of this simple calculator with the source code with the download button. This mostly responsive&nbsp;Calculator with mobile and tablet friendly.&nbsp;
Make it yours now by using it, downloading it and please share it. we will design more elements for you.

In this example, we used the javascript function to make this awesome calculator calculate the number that the user can enter with given numeric values.

Calculator In Javascript With Bootstrap 4

Template Name: Modern Landing Page Using Page.js.
High Resolution:&nbsp;&ndash; Yes.
Compatible Browsers:&nbsp;&ndash;&nbsp;All Browser.
Source Files included:&nbsp;&ndash; HTML ,Internal CSS, Page.js CDN and Images.
A modern Landing Page&nbsp;makes your website more attractive and the user can spend more time on this type of website. So here we designed a Beautiful&nbsp;Modern Landing Page Using&nbsp;Page.js&nbsp;with attractive looks.
Page.js is a Single page web framework with minimal use of javascript and routing.&nbsp; Using this web framework you can show&nbsp;pagination and external links with awesome&nbsp;transitions effects on scroll and clicks. Here we used&nbsp;Page.js&nbsp;<a href="https://github.com/visionmedia/page.js" target="_blank" rel="noreferrer noopener">CDN</a>&nbsp;and some global scripting and page.js modules.&nbsp; On this landing page, we used autoscrolling, navigation tooltip, and anchor functions. This is a responsive landing page with a mobile and tablet side. You can use this landing page to design your personal portfolio or and single page landing page for business and etc.
Make it yours now by using it, downloading it and please share it. we will design more elements for you.

A modern Landing Page makes your website more attractive and the user can spend more time on this type of website. So here we designed a Beautiful Modern Landing Page Using Page.js with attractive looks.

Modern Landing Page Using Page.js

Template Name: Simple Alerts Message In CSS3.
High Resolution:&nbsp;&ndash; Yes.
Compatible Browsers:&nbsp;&ndash;&nbsp;All Browser.
Source Files included:&nbsp;&ndash; HTML and Internal CSS.
Alerts message&nbsp;is mostly used for feedback purposes on the website. So here we designed simple and basic&nbsp;Alerts Message In&nbsp;<a href="../category/html5-css3/" target="_blank" rel="noreferrer noopener">CSS3</a>&nbsp;with fully responsive to mobile and tablet views.
This alert message box is used in a&nbsp;dynamic&nbsp;website to show typical actions for the client-side and user-side. Also, we used CSS3 basic properties with every alert message's height and width. In this element, we used some beautiful background colours with css3 cool properties and For making our message box rounded we used the border-radius properties.
Make it yours now by using it, downloading it and please share it. we will design more elements for you.

Alerts message is mostly used for feedback purposes on the website. So here we designed simple and basic Alerts Message In CSS3 with fully responsive to mobile and tablet views.

Simple Alerts Message In CSS3

Template Name: Profile Card In CSS3.
High Resolution:&nbsp;&ndash; Yes.
Compatible Browsers:&nbsp;&ndash;&nbsp;All Browser.
Source Files included:&nbsp;&ndash; HTML, Internal CSS, and Image.
The card is showing a person's little bio or for introductions. So here we made simple and basic&nbsp;profile cards using css3&nbsp;properties and HTML tags.
We designed different types of&nbsp;<a href="../?s=card" target="_blank" rel="noreferrer noopener">cards</a>&nbsp;in Bootstrap, angular material, and also designed in pure CSS. Here in these elements, we used some CSS3 properties and for the responsive side, we used media queries.&nbsp; In these elements, we used font awesome icons on card's bottom side and also we used hover effects.
Make it yours now by using it, downloading it and please share it. we will design more elements for you.

The card is showing a person's little bio or for introductions. So here we made simple and basic profile cards using css3 properties and HTML tags.

Profile Card In CSS3

Template Name: Login Form Tailwind CSS.
High Resolution:&nbsp;&ndash; Yes.
Compatible Browsers:&nbsp;&ndash;&nbsp;All Browser.
Source Files included:&nbsp;&ndash; HTML, Internal CSS, and CDN.
Tailwind CSS&nbsp;is a flexible and&nbsp;highly customizable&nbsp;CSS&nbsp;framework with a fully responsive CSS framework. Using this&nbsp;framework we designed a simple&nbsp;login form&nbsp;with a clean user interface.
<h3>What Is&nbsp;Tailwind CSS??</h3>
<a href="https://tailwindcss.com/" target="_blank" rel="noreferrer noopener">Tailwind CSS</a>&nbsp;is a&nbsp;utility-based&nbsp;CSS framework professionally designed for a rapid website.&nbsp; You can&nbsp;customization features of this framework and install it via npm.&nbsp;&nbsp;Tailwind CSS is easy to use with the best Documentation and community support. This framework has some similar UI components like bootstrap and another CSS framework. Here this framework has large collections of CSS classes for a small devices to large screens.&nbsp;
So here we designed a basic and simple login form using&nbsp;Tailwind CSS classes with css3 media queries for making our login form responsive. In this login form, we used custom&nbsp;Tailwind CSS classes like padding and background classes and also we used box-shadow classes with flexbox classes.&nbsp;&nbsp;
<div class="code-block code-block-5">&nbsp;</div>
Make it yours now by using it, downloading it and please share it. we will design more elements for you.

Tailwind CSS is a utility-based CSS framework professionally designed for a rapid website.  You can customization features of this framework and install it via npm. 

Simple Login Form Tailwind CSS

Template Name: Registration Form In Materializecss.
High Resolution:&nbsp;&ndash; Yes.
Compatible Browsers:&nbsp;&ndash;&nbsp;All Browser.
Source Files included:&nbsp;&ndash; HTML, Internal CSS, and CDN.
<a href="../category/materialize-css/" target="_blank" rel="noreferrer noopener">Materialize CSS</a>&nbsp;is a&nbsp;modern CSS framework&nbsp;with a fully responsive and Ui base component framework. Here we designed a beautiful Registration Form using the Materialize CSS&nbsp;framework and some&nbsp;CSS3&nbsp;properties.
The registration&nbsp;form is for a website user's to signup with given input fields. so here we designed a&nbsp;simple registration form&nbsp;with Html and CSS with Materialize CSS framework. In this form, we used the Materialize CSS grid and input fields with one simple button. Also, we used pulse class for the button attraction with amazing captivating effects.
Make it yours now by using it, downloading it and please share it. we will design more elements for you.

Materialize CSS is a modern CSS framework with a fully responsive and Ui base component framework. Here we designed a beautiful Registration Form using the Materialize CSS framework and some CSS3 properties.