Buttons Research – Designs

I wanted to look into the different designs for the buttons we were going to create. I looked into various designs and the coding for them to help me with how to display the buttons.

Rounded Button

login_signup button

Me and Mark looked into the round buttons, however we thought they would look quite odd as the rest of our web application didn’t have anything circular it was all just blocks and rounded squares.

Square Buttons

squre_buttons

These buttons were more of what we were looking for, however the style just didn’t seem to fit right with the look that we were going for, so it needed to be a little bit more modernized and have a great hover effect to the button.

Outlined button

official button

This design is something that we were looking for that fit into the modernized design of the web application we made.

code for the above;


<div class="container">
  <a class="button" href="#">I'm a button</a>
</div>

.button {
  display: inline-block;
  color: #5c6769;
  line-height: 50px;
  height: 50px;
  padding: 0 50px;
  outline: 5px solid rgba(255,255,255,0.15);
  text-decoration: none;
  text-shadow: 0 -1px 0 #fff;
  background: #f9f9f9; 
  background: -moz-linear-gradient(top, #f9f9f9 0%, #e5e5e5 100%);     
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#e5e5e5)); 
  background: -webkit-linear-gradient(top, #f9f9f9 0%,#e5e5e5 100%); 
  background: -o-linear-gradient(top, #f9f9f9 0%,#e5e5e5 100%); 
  background: -ms-linear-gradient(top, #f9f9f9 0%,#e5e5e5 100%); 
  background: linear-gradient(to bottom, #f9f9f9 0%,#e5e5e5 100%);
  -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0,0,0,0.05);
  -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0,0,0,0.05);
  box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0,0,0,0.05);
  -webkit-transition: all .3s linear;
  -moz-transition: all .3s linear;
  transition: all .3s linear;
}
.button:hover {
 	outline: 5px solid rgba(0,0,0,0.05); 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s