Ricardo-Diaz

Only Line Input

Ricardo-Diaz

//Depth & Gradient Input

 .depth {
  display: block;
  border: 1px solid silver;
  background: linear-gradient(#eee, #fff);
  transition: all 0.3s ease-out;
  padding: 5px;
  color: #555;
}

Ricardo-Diaz

//Mac Input

 .mac {
  display: block;
  border: none;
  border-radius: 20px;
  padding: 5px 8px;
  color: #333;
  box-shadow: 
    inset 0 2px 0 rgba(0,0,0,.2), 

Ricardo-Diaz

//Simple Input with border that fades when active.

 .simple-input {
  display: block;
  padding: 5px;
  border: 4px solid #F1B720;
  border-radius: 5px;
  color: #333;
  transition: all 0.3s ease-out;
}

Ricardo-Diaz

Button Styles



//Modern-shadow around it

 .modern {
  display: inline-block;
  margin: 10px;
  padding: 8px 15px;

Ricardo-Diaz

//Bordered Link

//Link surround by a border box. nothing in the inside just the border.
 


 .bordered-link {
  display: inline-block;
  padding: 8px;
  border: 3px solid #FCB326;

Ricardo-Diaz

//Metro Styles

//Boxes will have a 3d effet that looks like windows metro. There is a 3d version and plain button.


 .metro {
  display: inline-block;
  padding: 10px;
  margin: 10px;
  background: #08C;

Ricardo-Diaz

//Triangle Inline Link

//This is some dummy text to show an inline link.

//Link will have a triangle next to it that changes upon hover


 .inline-link-3 {
    display: inline-block;
    position: relative;

Ricardo-Diaz

//Underlined Inline Link

//This is some dummy text to show an inline link.

//Link will have dashes that transform into dotted over hover.

 .inline-link-2 {
  display: inline-block;
  border-bottom: 1px dashed rgba(0,0,0,0.4);

Ricardo-Diaz

Background Inline Link