10 well-worth collection of csshover effects

<! DOCTYPE html>
<meta charset= "UTF-8"/>
<title>login</title>
<style type= "text/css" media= "screen" >
/* Common style */
Body {
margin:0;
height:0;
Background-color: #F1F1F1;
}

. Warp {
width:250px;
height:150px;
Background-color: #5e7c87;
Float:left;
margin:15px 15px;
box-shadow:10px 10px 5px #888888;
}

. Sim-button {
line-height:50px;
height:50px;
Text-align:center;
Margin-right:auto;
Margin-left:auto;
margin-top:50px;
width:60%;
Cursor:pointer;
Color:rgba (255, 255, 255, 1);
border:1px Solid Rgba (255, 255, 255, 0.5);
}
/* Effect One */

. button1 {
-webkit-transition:all 0.5s;
Transition:all 0.5s;
}

. button1:hover {
Background-color:rgba (255, 255, 255, 0.2);
border-radius:20px;
}
/* Effect 2 */

. button2 {
-webkit-transition:all 0.5s;
Transition:all 0.5s;
Overflow:hidden;
position:relative;
}

. button2:hover {
Background-color:rgba (255, 255, 255, 0.2);
}

. button2>span {
-webkit-transition:all 0.3s;
Transition:all 0.3s;
}

. button2:hover>span {
opacity:0;
}

. button2::after {
Content:attr (Data-text);
width:100%;
height:100%;
Position:absolute;
Left: -50px;
top:0;
opacity:0;
-webkit-transition:all 0.5s;
Transition:all 0.5s;
}

. button2:hover::after {
left:0;
Opacity:1;
}
/* Effect three */

. button3 {
-webkit-transition:all 0.5s;
Transition:all 0.5s;
Overflow:hidden;
position:relative;
}

. button3:hover {
Background-color:rgba (255, 255, 255, 0.2);
}

. button3>span {
-webkit-transition:all 0.3s;
Transition:all 0.3s;
}

. button3:hover>span {
opacity:0;
}

. button3::after {
Content:attr (Data-text);
width:100%;
height:100%;
Position:absolute;
left:0;
top:0;
opacity:0;
-webkit-transform:translate ( -9%, -50%) rotate ( -9deg);
Transform:translate ( -9%, -50%) rotate ( -9deg);
-webkit-transition:all 0.3s;
Transition:all 0.3s;
}

. button3:hover::after {
-webkit-transform:translate (0, 0) rotate (0deg);
Transform:translate (0, 0) rotate (0deg);
Opacity:1;
}
/* Effect Four */

. button4 {
position:relative;
Overflow:hidden;
}

. button4 span {
Z-index:2;
}

. button4::after {
Content: "";
width:100%;
height:100%;
Z-index:1;
opacity:0;
Position:absolute;
left:0;
top:0;
Background-color:rgba (255, 255, 255, 0.5);
-webkit-transition:all 0.5s;
Transition:all 0.5s;
}

. button4:hover::after {
Opacity:1;
-WEBKIT-TRANSFORM:SKEWX ( -180deg) scale (0.5, 1);
TRANSFORM:SKEWX ( -180deg) scale (0.5, 1);
}
/* Effect Five */

. button5 {
Border:none;
position:relative;
}

. button5::before {
Content: ";
Position:absolute;
left:0;
top:0;
width:100%;
height:100%;
border:1px Solid Rgba (255, 255, 255, 0.5);
-webkit-transition:all 0.5s;
Transition:all 0.5s;
}

. button5:hover::before {
opacity:0;
-webkit-transform:scale (1.2, 1.2);
Transform:scale (1.2, 1.2);
}

. button5::after {
Content: ";
width:100%;
height:100%;
Position:absolute;
left:0;
top:0;
opacity:0;
Background-color:rgba (255, 255, 255, 0.5);
-webkit-transform:scale (0.5, 0.5);
Transform:scale (0.5, 0.5);
-webkit-transition:all 0.5s;
Transition:all 0.5s;
}

. button5:hover::after {
Opacity:1;
-webkit-transform:scale (1, 1);
Transform:scale (1, 1);
}
/* Effect SIX */

. button6 {
Border:none;
position:relative;
}

. button6::before {
Content: ";
Position:absolute;
left:0;
top:0;
width:100%;
height:100%;
Background-color:rgba (255, 255, 255, 0.5);
-webkit-transition:all 0.5s;
Transition:all 0.5s;
}

. button6:hover::before {
opacity:0;
-webkit-transform:scale (0.5, 0.5);
Transform:scale (0.5, 0.5);
}

. button6::after {
Content: ";
width:100%;
height:100%;
Position:absolute;
left:0;
top:0;
opacity:0;
border:1px Solid Rgba (255, 255, 255, 0.5);
-webkit-transform:scale (1.2, 1.2);
Transform:scale (1.2, 1.2);
-webkit-transition:all 0.5s;
Transition:all 0.5s;
}

. button6:hover::after {
Opacity:1;
-webkit-transform:scale (1, 1);
Transform:scale (1, 1);
}
/* Effect Seven 27*/

. button7 {
border:1px Solid Rgba (255, 255, 255, 0.5);
-webkit-transition:all 0.5s;
Transition:all 0.5s;
Overflow:hidden;
position:relative;
}

. button7:hover {
border:1px Solid Rgba (255, 255, 255, 0);
}

. button7::before {
Content: ";
Position:absolute;
left:0;
bottom:0;
width:100%;
height:1px;
Background-color:rgba (255, 255, 255, 0.5);
-webkit-transform:translate ( -100%, -600%) rotate (9deg);
Transform:translate ( -100%, -600%) rotate (9deg);
-webkit-transition-timing-function:cubic-bezier (0.75, 0, 0.125, 1);
Transition-timing-function:cubic-bezier (0.75, 0, 0.125, 1);
-webkit-transition:all 0.5s;
Transition:all 0.5s;
}

. button7:hover::before {
-webkit-transform:translate (0, 0);
Transform:translate (0, 0);
}
/* Effect EIGHT */

. button8 {
Color:rgba (255, 255, 255, 1);
Border:none;
position:relative;
}

. button8:hover>span {
letter-spacing:2px;
}

. button8::before {
Content: ";
Position:absolute;
left:0;
top:0;
width:100%;
height:100%;
Z-index:1;
opacity:0;
-webkit-transition:all 0.3s;
Transition:all 0.3s;
border-top-width:1px;
border-bottom-width:1px;
Border-top-style:solid;
Border-bottom-style:solid;
Border-top-color:rgba (255, 255, 255, 0.5);
Border-bottom-color:rgba (255, 255, 255, 0.5);
-webkit-transform:scale (0.1, 1);
Transform:scale (0.1, 1);
}

. button8:hover::before {
Opacity:1;
-webkit-transform:scale (1, 1);
Transform:scale (1, 1);
}

. button8::after {
Content: ";
Position:absolute;
left:0;
top:0;
width:100%;
height:100%;
Z-index:1;
Background-color:rgba (255, 255, 255, 0.25);
-webkit-transition:all 0.3s;
Transition:all 0.3s;
}

. button8:hover::after {
opacity:0;
-webkit-transform:scale (0.1, 1);
Transform:scale (0.1, 1);
}
/* Effect Nine */

. button9 {
Color:rgba (255, 255, 255, 1);
Border:none;
position:relative;
border-top-width:1px;
border-bottom-width:1px;
Border-top-style:solid;
Border-bottom-style:solid;
Border-top-color:rgba (255, 255, 255, 0.5);
Border-bottom-color:rgba (255, 255, 255, 0.5);
-webkit-transition:all 0.3s;
Transition:all 0.3s;
}

. button9:hover span {
letter-spacing:2px;
}

. button9:hover {
Border-top-color:rgba (255, 255, 255, 0);
Border-bottom-color:rgba (255, 255, 255, 0);
}

. button9::before {
Content: ";
Position:absolute;
top:0;
right:0;
width:1px;
height:100%;
Z-index:1;
-webkit-transition:all 0.3s;
Transition:all 0.3s;
Background-color:rgba (255, 255, 255, 0.5);
}

. button9:hover::before {
-webkit-transform:translate ( -76px, 0) rotate (270deg);
Transform:translate ( -76px, 0) rotate (270deg);
}

. button9::after {
Content: ";
Position:absolute;
top:0;
left:0;
width:1px;
height:100%;
Z-index:1;
-webkit-transition:all 0.3s;
Transition:all 0.3s;
Background-color:rgba (255, 255, 255, 0.5);
}

. button9:hover::after {
-webkit-transform:translate (76px, 0) rotate (180deg);
Transform:translate (76px, 0) rotate (180deg);
}
/* Effect 10 */

. button10 {
-webkit-transition:all 0.3s;
Transition:all 0.3s;
}

. button10:hover {
-webkit-animation-name:move;
Animation-name:move;
-webkit-animation-duration:1s;
Animation-duration:1s;
-webkit-animation-fill-mode:both;
Animation-fill-mode:both;
Background-color:rgba (255, 255, 255, 0.2);
}

@-webkit-keyframes Move {
From
11.1%,
to {
-webkit-transform:none;
Transform:none;
}
22.2% {
-webkit-transform:skewx ( -12.5deg) skewy ( -12.5deg);
Transform:skewx ( -12.5deg) skewy ( -12.5deg);
}
33.3% {
-webkit-transform:skewx (6.25deg) skewy (6.25deg);
Transform:skewx (6.25deg) skewy (6.25deg);
}
44.4% {
-webkit-transform:skewx ( -3.125deg) skewy ( -3.125deg);
Transform:skewx ( -3.125deg) skewy ( -3.125deg);
}
55.5% {
-webkit-transform:skewx (1.5625deg) skewy (1.5625deg);
Transform:skewx (1.5625deg) skewy (1.5625deg);
}
66.6% {
-webkit-transform:skewx ( -0.78125deg) skewy ( -0.78125deg);
Transform:skewx ( -0.78125deg) skewy ( -0.78125deg);
}
77.7% {
-webkit-transform:skewx (0.390625deg) skewy (0.390625deg);
Transform:skewx (0.390625deg) skewy (0.390625deg);
}
88.8% {
-webkit-transform:skewx ( -0.1953125deg) skewy ( -0.1953125deg);
Transform:skewx ( -0.1953125deg) skewy ( -0.1953125deg);
}
}

@keyframes Move {
From
11.1%,
to {
-webkit-transform:none;
Transform:none;
}
22.2% {
-webkit-transform:skewx ( -12.5deg) skewy ( -12.5deg);
Transform:skewx ( -12.5deg) skewy ( -12.5deg);
}
33.3% {
-webkit-transform:skewx (6.25deg) skewy (6.25deg);
Transform:skewx (6.25deg) skewy (6.25deg);
}
44.4% {
-webkit-transform:skewx ( -3.125deg) skewy ( -3.125deg);
Transform:skewx ( -3.125deg) skewy ( -3.125deg);
}
55.5% {
-webkit-transform:skewx (1.5625deg) skewy (1.5625deg);
Transform:skewx (1.5625deg) skewy (1.5625deg);
}
66.6% {
-webkit-transform:skewx ( -0.78125deg) skewy ( -0.78125deg);
Transform:skewx ( -0.78125deg) skewy ( -0.78125deg);
}
77.7% {
-webkit-transform:skewx (0.390625deg) skewy (0.390625deg);
Transform:skewx (0.390625deg) skewy (0.390625deg);
}
88.8% {
-webkit-transform:skewx ( -0.1953125deg) skewy ( -0.1953125deg);
Transform:skewx ( -0.1953125deg) skewy ( -0.1953125deg);
}
}
</style>

<body>

<div class= "Warp" >
<div class= "Sim-button button1" >
<span>login1</span>
</div>
</div>
<div class= "Warp" >
<div class= "Sim-button button2" data-text= "login2" >
<span>login2</span>
</div>
</div>
<div class= "Warp" >
<div class= "Sim-button button3" data-text= "login3" >
<span>login3</span>
</div>
</div>
<div class= "Warp" >
<div class= "Sim-button button4" >
<span>login4</span>
</div>
</div>
<div class= "Warp" >
<div class= "Sim-button button5" >
<span>login5</span>
</div>
</div>
<div class= "Warp" >
<div class= "Sim-button button6" >
<span>login6</span>
</div>
</div>
<div class= "Warp" >
<div class= "Sim-button button7" >
<span>login7</span>
</div>
</div>
<div class= "Warp" >
<div class= "Sim-button button8" >
<span>login8</span>
</div>
</div>
<div class= "Warp" >
<div class= "Sim-button button9" >
<span>login9</span>
</div>
</div>
<div class= "Warp" >
<div class= "Sim-button button10" >
<span>login10</span>
</div>
</div>
</body>

10 well-worth collection of csshover effects