
Transform :
The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.
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.
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 :