Style your button with transform and transition : CSS3

Style up your button with CSS3 transitions and transform. i'm going to give a demo to use these properties. below some basic information of Transition and Transform

Transform :

The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.

transform: none|transform-functions|initial|inherit;

Transition :

CSS3 transitions are effects that let an element gradually change from one style to another.

To do this, you must specify two things:

• Specify the CSS property you want to add an effect to
• Specify the duration of the effect.

transition: all 1s ease-in-out;

Example with a Button


HTML :

<div>
 <button type="button" class="btn-effect">Submit</button>
</div>

CSS :

.btn-effect:before {
    background: none repeat scroll 0 0 #66B3F6;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
    color: #fff;
}
.btn-effect:after {
    background: none repeat scroll 0 0 #BFE1FB;
    content: "";
    height: 0;
    left: 50%;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translateX(0%) translateY(-25%) rotate(45deg);
    -webkit-transform: translateX(0%) translateY(-25%) rotate(45deg);
    transition: all 0.3s ease 0s;
   -webkit-transition: all 0.3s ease 0s;
    width: 100%;
    z-index: -1;
    border: 1px solid #f4f4f4;
    left: 0;
    top: 0;
}
.btn-effect {
    border: 0.5px solid #f4f4f4;
    color: #fff;
    cursor: pointer;
    font-family: segoe ui;
    font-size: 18px;
    height: 45px;
    line-height: 18px;
    padding: 10px 40px;
    position: relative;
    font-variant: small-caps;
    transition: all 0.5s ease-in-out 0s;
    box-shadow: 1px 3px 5px 1px #aaa;
    font-size: 22px;
    overflow: hidden;
    z-index: 99;
  border-radius:5px;
}
.btn-effect:hover, .btn-effect:active {
    color: #000000 !important;
}
.btn-effect:hover:after {
    height: 215%;
    opacity: 1;
    width: 100%;
}
.btn-effect:active:after {
    height: 235%;
    opacity: 1;
}

LIVE DEMO :