Contact Ian
CSS Button Hover Effects
We changed initial settings such that these buttons are full width from advanced settings,
background color is transparent and text color is translucent to get best results
Button 1 CSS
#BUTTON CLASS ID{
border: 2px solid #aaa;
}
#BUTTON CLASS ID :hover { background: #141E30; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #243Baa, #141E30); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #243Baa, #141E30); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
color: #fff;
}
Button 2 CSS
#BUTTON CLASS ID{
background: #4e54c8;
background: -webkit-linear-gradient(to right, #8f94fb, #4e54c8);
background: linear-gradient(149deg, rgba(191,0,73,1) 21%, rgba(90,1,37,1) 75%);
color: #fff;
border: 3px solid #eee;}
#BUTTON CLASS ID :hover { background: #141E30;
background: -webkit-linear-gradient(to right, #243B55, #141E30);
background: linear-gradient(to right, #243B55, #141E30);
color: #fff;
zoom: 110%;
transition: 1s;}
Button 3 CSS
#BUTTON CLASS ID :hover { background: #fff; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #ffffff, #ffffff); /* Chrome 10-25, Safari 5.1-6 */
background: #eee; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
color: #000;
}
Button 4 CSS
#BUTTON CLASS ID{
-webkit-box-shadow: 5px 5px 0px 0px rgba(245,85,0,0.77), 5px 5px 15px 5px rgba(0,0,0,0);
box-shadow: 5px 5px 0px 0px rgba(245,85,0,0.77), 5px 5px 15px 5px rgba(0,0,0,0);}
#BUTTON CLASS ID :hover {background: #fff; /* fallback for old browsers */
background: #000; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
color: #fff;
}
Button 5 CSS
#BUTTON CLASS ID{
-webkit-box-shadow: 5px 5px 2px 1px rgba(14,55,20,.3), 5px 5px 15px 5px rgba(0,0,0,0);
box-shadow: 5px 5px 2px 0px rgba(14,55,20,.3), 5px 5px 15px 5px rgba(0,0,0,0);}
#BUTTON CLASS ID :hover {background: #fff0; /* fallback for old browsers */
/* Chrome 10-25, Safari 5.1-6 */
background: #275CA0; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
color: #eee;
}
Button 6 CSS
#BUTTON CLASS ID{
-webkit-box-shadow: inset 3px 3px 1px rgba(130,177,100,1), 2px 2px rgba(55,155,125,1) !important;
box-shadow: inset 3px 3px 1px rgba(130,177,100,1), 2px 2px rgba(55,155,125,1) !important;
}
#button-Um4-9fEe8k
#BUTTON CLASS ID :hover {background: #fff0; /* fallback for old browsers */
/* Chrome 10-25, Safari 5.1-6 */
background: #2b5Cd0; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
color: #eee;
}
Button 7 CSS (with keyframe)
#BUTTON CLASS ID{
color: #fff;
font-family: 'Roboto Condensed', sans-serif;
font-size: 14px;
font-weight: 400;
text-transform: capitalize;
letter-spacing: 0px;
border: 2px solid #801EBD;
overflow: hidden;
position: relative;
z-index: 1;
transition: all 0.5s;
}
#button-6RZx2BU6DV:hover{
color: #fff;
animation: swoosh 0.4s ease-out 0.2s;
}
#button-6RZx2BU6DV:before,
#button-6RZx2BU6DV:after{
content: "";
background-color: #E36BFE;
height: 100%;
width: 100%;
opacity: 0.7;
position: absolute;
top: 0;
left: -100%;
z-index: -1;
transition: all 0.4s ease-out 0.1s;
}
#button-6RZx2BU6DV:after{
opacity: 0;
transform: scale(0.9,0.7);
left: 0;
transition: all 0.3s ease-out 0s;
}
#button-6RZx2BU6DV:hover:before{ left: 100%; }
#button-6RZx2BU6DV:hover:after{
opacity: 0.3;
transform: scale(1);
}
@keyframes swoosh{
0%,100%{ box-shadow: 0 0 0 0 transparent; }
50%{ box-shadow: 0 0 0 8px rgba(245,128,242,0.3); }
}
Button 8 CSS
#BUTTON CLASS ID{
width: 350px;
height: 40px;
color: #fff;
border-radius: 5px;
padding: 10px 25px;
font-family: 'Lato', sans-serif;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);
outline: none;
}
#button-iYQCXbTomF {
width: 350px;
height: 40px;
line-height: 42px;
padding: 0;
border: none;
background: rgb(255,27,0);
background: linear-gradient(0deg, rgba(255,27,0,1) 0%, rgba(251,75,2,1) 100%);
}
#button-iYQCXbTomF:hover {
color: #f0094a;
background: transparent;
box-shadow:none;
}
#button-iYQCXbTomF:before,
#button-iYQCXbTomF:after{
content:'';
position:absolute;
top:0;
right:0;
height:2px;
width:0;
background: #f0094a;
box-shadow:
-1px -1px 5px 0px #fff,
7px 7px 20px 0px #0003,
4px 4px 5px 0px #0002;
transition:400ms ease all;
}
#button-iYQCXbTomF:after{
right:inherit;
top:inherit;
left:0;
bottom:0;
}
#button-iYQCXbTomF:hover:before,
#button-iYQCXbTomF:hover:after{
width:100%;
transition:800ms ease all;
}
Button 10 CSS
#BUTTON CLASS ID {
background: rgb(255,151,0);
border: none;
z-index: 1;
}
#BUTTON CLASS ID:after {
position: absolute;
content: "";
width: 100%;
height: 0;
top: 0;
left: 0;
z-index: -1;
border-radius: 5px;
background-color: #eaf818;
background-image: linear-gradient(315deg, #eaf818 0%, #f6fc9c 74%);
box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5);
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);
transition: all 0.3s ease;
}
#button-bBpRru8zFg:hover {
color: #000;
}
#button-bBpRru8zFg:hover:after {
top: auto;
bottom: 0;
height: 100%;
}
#button-bBpRru8zFg:active {
top: 2px;
}
Button 11 CSS
#button Class ID
{
color: white;
background: #6225E6;
transition: 1s;
box-shadow: 6px 6px 0 black;
transform: skewX(-10deg);
}
#button-class id:hover
{
transition: 0.5s;
box-shadow: 7px 7px 0 #FBC638;
}
Button 12
#button-class id:hover
{
box-shadow: 4px 4px 20px #decc44;
}
Button 13
Powered by Omni Matic
