A Pen by LukyVJ.

index.html

<div class="main">
  <h1>Some <code>:active</code> & <code>:focus </code>effects</h1>
  <small>You can download the archive at the bottom of the document. Then, simply add the proper class to your inputs. (<code>.fade-border, .fade-in-border, .fade-background, .kiss-in, .kiss-out</code>)</small>
  <input type="text" placeholder=".fade-border" class="fade-border"/>
  <input type="text" placeholder=".fade-border" class="fade-border"/>
  <input type="text" placeholder=".fade-border" class="fade-border"/>
  
  <input type="text" placeholder=".fade-in-border" class="fade-in-border"/>
  <input type="text" placeholder=".fade-in-border" class="fade-in-border"/>
  <input type="text" placeholder=".fade-in-border" class="fade-in-border"/>

  <input type="text" placeholder=".fade-background" class="fade-background"/>
  <input type="text" placeholder=".fade-background" class="fade-background"/>
  <input type="text" placeholder=".fade-background" class="fade-background"/>
  
  <input type="text" placeholder=".kiss-in" class="kiss-in"/>
  <input type="text" placeholder=".kiss-in" class="kiss-in"/>
  <input type="text" placeholder=".kiss-in" class="kiss-in"/>
  
  <input type="text" placeholder=".kiss-out" class="kiss-out"/>
  <input type="text" placeholder=".kiss-out" class="kiss-out"/>
  <input type="text" placeholder=".kiss-out" class="kiss-out"/>
    
  <input type="text" placeholder=".popping-border" class="popping-border"/>
  <input type="text" placeholder=".popping-border" class="popping-border"/>
  <input type="text" placeholder=".popping-border" class="popping-border"/>
</div> 
<div class="download-pack">
	<a href="http://lucasbonomi.com/download/css/active_and_focus.min.css1.2.zip" target="_blank" class="btn">Download</a>
</div>
<small> - <a href="http://twitter.com/lukyvj" target="_blank">@LukyVj</a>  - </small>

script.js

// 2014 @Lukyvj
// Http://lucasbonomi.com

Some-:active-&-:focus-effects.markdown

Some :active & :focus effects

I had some freetime, and I wanted to try some things.

A Pen by LukyVJ on CodePen.

License.

style.scss

@import "bourbon";

// Different colors to try : 

$c1: #54D7BA;
$c2: #F08782;

$color-1: $c1;     // Background color
$color-2: #FFFFFF; // Text & broders color

html,body{
  background: $color-1;
  code{
    background: transparent; 
    color: $color-2;
  }
  small{
    color: #ffffff;
    float: left;
    text-align: center;
    width: 100%;
    a{color: #fff;}
  }
}
.download-pack{
  width: 80%;
  margin:  auto; 
  text-align: center;
  
  .btn{
    min-width: 240px;
    padding: .6em; 
    border: 2px solid $color-2;
    margin-top: -6em;
    color: #fff; 
    cursor: pointer;
    
    &:hover{
      background: $color-2;
      color: $color-1;
    }
  }
}
.main{
  width: 80%;
  margin: 4.5em auto; 
  color: $color-2;
  
  h1{
    padding: .2em; 
    margin-bottom: 0em;
    text-align: center;
  }
  
  input{
    width: 30%;
    margin: 2em 1.25%;
    @include appearance(none);
    border: 0; 
    background: transparent;
    border: 2px solid $color-2; 
    padding: .25em .65em;
	 outline: none; 
    color: $color-2;
    border-radius: 0px;
    
    @include placeholder {
       color: $color-2;
      text-align: center;
     }
    
    &:nth-child(1){
      margin-left: 0 !important;
    } 
     
    &.fade-border{
      &:active,
      &:focus{
        @include animation(fade .55s ease-in);
      }
    }
    
    &.fade-in-border{
      &:active,
      &:focus{
        @include animation(fade-in .55s ease-in);
      }
    }
    
     &.fade-background{
      &:active,
      &:focus{
        @include animation(background .55s ease-in);
        background: $color-2; 
        color: $color-1;
        @include placeholder {
          color: $color-1;
          text-align: center;
        }

      }
    }
    
    &.kiss-in{
      &:active,
      &:focus{
        @include animation(kiss-in .45s ease-out);
      }
    }
    
    &.kiss-out{
      &:active,
      &:focus{
        @include animation(kiss-out .45s ease-out);
      }
    }
    
    &.popping-border{
      &:active,
      &:focus{
        @include animation(popping-border .45s ease-out);
        box-shadow:0 0 0 .5em rgba(white, .5);
        @include transition(all .45s ease-out, box-shadow .45s ease .35s);
      }
    }
  }
}


@include keyframes(fade){
  0%{
    box-shadow: 0 0 0 0 transparent;
  }
  66%{
    box-shadow: 
      0 0 0 10px  $color-1,
      0 0 0 12px  $color-2; 
  }
  
  100%{
    box-shadow: 
      0 0 0 20px  transparent,
      0 0 0 22px  transparent; 
  }
}

@include keyframes(fade-in){
  0%{
    box-shadow:inset 0 0 0 0 transparent;
  }
  66%{
    box-shadow: 
     inset 0 0 0 10px  $color-1,
     inset 0 0 0 12px  $color-2; 
  }
  
  100%{
    box-shadow: 
     inset 0 0 0 20px  transparent,
     inset 0 0 0 22px  transparent; 
  }
}

@include keyframes(background){
  0%{
   background: transparent;
  }
  66%{
    background: $color-2; 
  }
  
  100%{
    background: $color-2; 
  }
}

@include keyframes(kiss-in){
  0%{
	@include transform(scale(1));
  }
  66%{
	@include transform(scale(.9));
  }
  
  100%{
	@include transform(scale(1));
  }
}

@include keyframes(kiss-out){
  0%{
	@include transform(scale(1));
  }
  66%{
	@include transform(scale(1.1));
  }
  
  100%{
	@include transform(scale(1));
  }
}

@include keyframes(popping-border){
  0%{
	@include transform(scale(1));
  }
  66%{
	@include transform(scale(.9));
  }
  
  100%{
	@include transform(scale(1));
   box-shadow:0 0 0 .25em rgba(white, .25);
  } 
}