Fostrap

The Login page is contained on a dynamic website. This page is the door leading to the Administrators page, or a user page if his website is the website that require users to have an account.  The existence of the login page is pretty vital considering the usability and interactive with the user. Unlike other website elements, this login form there is not to be read, but to be used directly by filling it.

Stuffing usually consists of a login form email or username and password. Given the importance of this page, we can't design it desultory. Design a nice login page will produce a good User Experience. 

Well, below fostrap collect 5 templates free login page is ready you use. Please select and download the one you like. You are free to use them on your project. Click the picture for details and downloads.

1. Calm Breeze Login Screen

2. Login Form Dark Blue

3. Flat Login Form

A pen by Andi Tran

4. Login To Everdwell

5. Animated Login Form

Diposkan oleh Unknown

Web design is highly developed so fast, I can't imagine what else will come in 2017, in 2016 is very much the trend of web design that is very popular with its beauty, namely minimalist web design, minimalist web design includes layout, button, navbar, sidebar, colors, typography and more. Many are comfortable with minimalist web design because web design minimalist, very unsightly by eyes, and because of the minimalist design is very simple and not too complicated, minimalist web design is often referred to as the style of material design and flat design. This is Creative CSS Button Style Tutorial by Fostrap

Creative CSS Button Style

1. Primary Button

<a href="#" class="action-button shadow animate blue">Submit</a>

CSS

.animate
{
transition: all 0.1s;
-webkit-transition: all 0.1s;
}
.action-button
{
position: relative;
padding: 10px 40px;
        margin: 0px 10px 10px 0px;
border-radius: 3px;
font-family: 'Lato', sans-serif;
font-size: 18px;
color: #FFF;
text-decoration: none; }
.blue
{
background-color: #3498db;
border-bottom: 5px solid #2980B9;
text-shadow: 0px -2px #2980B9;
}
.action-button:active
{
transform: translate(0px,5px);
  -webkit-transform: translate(0px,5px);
border-bottom: 1px solid;
}

Demo : Submit

2. Danger Button

<a href="#" class="action-button shadow animate red">Submit</a>

3. Success Button

<a href="#" class="action-button shadow animate green">Submit</a>

4. Warning Button

<a href="#" class="action-button shadow animate yellow">Submit</a>

Diposkan oleh Unknown