css实现48种不同样式的按钮悬浮动画效果代码
代码语言：html
所属分类：悬停
代码描述：css实现48种不同样式的按钮悬浮动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
<style>
/* CSS Document */
body {
font-family: 'Raleway', sans-serif;
margin:0px;
font-size: 15px;
color: #b3b3b3;
width:100%;
}
* {
box-sizing:border-box;
}
a:-webkit-any-link {
text-decoration:none;
}
.hdr{
padding:5px;
background-color:white;
}
h1 {
color: turquoise;
font-family: 'Raleway', sans-serif;
font-size: 40px;
text-shadow: 1px 2px 2px rgba(149, 150, 150, 1);
font-weight: bold;
letter-spacing: -1px;
line-height: 1;
text-align: center;
}
h2 {
color: tomato;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 300;
text-align: center;
}
p {
color: tomato;
text-align:center;
font-family: 'Raleway', sans-serif;
font-size: 14px;
margin: 0 0 24px;
}
.content-1{
height: auto;
width: 1430px;
}
.white {
height: 200px;
padding:70px 50px;
background:white;
box-shadow:0px 0.5px 6px 0 #8a8a8a;
}
.grey {
height: 200px;
padding:70px 50px;
background:#efefef;
box-shadow:0px 0.5px 8px 0 #8a8a8a;
}
section{
width: -webkit-max-content;
width: -moz-max-content;
width: -o-max-content;
width: -ms-max-content;
}
div{
max-width: auto;
}
table{
border-collapse: collapse;
height: 600px;
width: 1430px;
}
td{
height: auto;
border-style: dotted;
text-align: center;
padding: 50px;
width: 1430px;
}
.btn-layout, .bttn {
display: inline-flex;
margin: 0 5px 0 0;
height:60px;
width:155px;
position: relative;
opacity: 0.999;
padding: 20px 37px;
text-align:center;
border-radius:3px;
border: 1px solid #b3b3b3;
-moz-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
overflow:hidden;
}
/* CSS Document */
/*------------------------------SAMPLE-1------------------------------*/
.b1:hover, .b2:hover, .b3:hover, .b4:hover, .b5:hover, .b6:hover, .b7:hover, .b8:hover {
color:white;
}
/*SAMPLE-1 : BUTTON-1*/
.b1:before{
content: "";
width: 100%;
height: 0;
border-radius: 3px;
position: absolute;
background-color: #2ecc71;
left: 0;
bottom: 0;
transition: 0.4s;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-ms-transition: 0.4s;
-o-transition: 0.4s;
z-index: -1;
}
.b1:hover:before{
height: 100%;
bottom: auto;
top: 0;
}
/*SAMPLE-1 : BUTTON-2*/
.b2:before{
content: "";
width: 100%;
height: 0;
border-radius: 3px;
position: absolute;
background-color: #9b59b6;
left: 0;
top: 0;
transition: 0.4s;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-ms-transition: 0.4s;
-o-transition: 0.4s;
z-index: -1;
}
.b2:hover:before{
height: 100%;
top: auto;
bottom: 0;
}
/*SAMPLE-1 : BUTTON-3*/
.b3:before{
content: "";
width: 0;
height: 100%;
position: absolute;
background-color: #ff5722;
right: 0;
top: 0;
transition: 0.4s;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-ms-transition: 0.4s;
-o-transition: 0.4s;
z-index: -1;
}
.b3:hover:before{
width: 100%;
right: auto;
left: 0;
}
/*SAMPLE-1 : BUTTON-4*/
.b4:before{
content: "";
width: 0;
height: 100%;
position: absolute;
background-color: #1d8ef7;
left: 0;
top: 0;
transition: 0.4s;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-ms-transition: 0.4s;
-o-transition: 0.4s;
z-index: -1;
}
.b4:hover:before{
width: 100%;
left: auto;
right: 0;
}
/*SAMPLE-1 : BUTTON-5*/
.b5:before{
content: "";
width: 0;
height: 0;
position: absolute;
background-color: #2ecc71;
left: 0;
bottom: 0;
transition: 0.4s;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-ms-transition: 0.4s;
-o-transition: 0.4s;
z-index: -1;
}
.b5:after{
content: "";
width: 0;
height: 0;
position: absolute;
background-color: #2ecc71;
right: 0;
top: 0;
transition: 0.4s;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-ms-transition: 0.4s;
-o-transition: 0.4s;
z-index: -1;
}
.b5:hover:before, .b5:hover:after{
width: 50%;
height: 100%;
}
/*SAMPLE-1 : BUTTON-6*/
.b6:before{
content: "";
width: 0;
height: 0;
position: absolute;
background-color: #9b59b6;
left: 0;
top: 0;
transition: 0.4s;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-ms-transition: 0.4s;
-o-transition: 0.4s;
z-index: -1;
}
.b6:after{
content: "";
width: 0; height: 0;
position: absolute;
background-color: #9b59b6;
right: 0;
bottom: 0;
transition: 0.4s;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-ms-transition: 0.4s;
-o-transition: 0.4s;
z-index: -1;
}
.b6:hover:before, .b6:hover:after{
width: 50%;
height: 100%;
}
/*SAMPLE-1 : BUTTON-7*/
.b7:before{
content: "";
width: 0;
height: 0;
position: absolute;
background-color: #ff5722;
left: 50%;
bottom: 50%;
transition: 0.4s;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-ms-transition: 0.4s;
-o-transition: 0.4s;
z-index: -1;
}
.b7:hover:before{
width: 100%;
height: 100%;
left: 0;
bottom: 0;
}
/*SAMPLE-1 : BUTTON-8*/
.btn-layout.b8:hover {
transform: scale(1.2);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
background-color: #1d8ef7;
}
.btn-layout.b8:hover:after {
width: 0%;
}
/*------------------------------SAMPLE-2------------------------------*/
/*SAMPLE-2 : BUTTON-1*/
.bt1:before{
content: "";
width: 100%;
height: 0;
position: absolute;
background-color: #2ecc71;
top: 50%;
left: 0;
transition: 0.4s;
-moz-transition: 0.4s;
-ms-transition: 0.4s;
-o-transition: 0.4s;
-webkit-transition: 0.4s;
z-index: -1;
}
.bt1:after{
content: "";
width: 100%;
height: 0;
position: absolute;
background-color: #2ecc71;
left: 0;
bottom: 50%;
transition: 0.4s;
-moz-transition: 0.4s;
-ms-transition: 0.4s;
-o-transition: 0.4s;
-webkit-transition: 0.4s;
z-index: -1;
}
.bt1:hover:before, .bt1:hover:after{
height: 50%;
}
.bt1:hover {
color: #fff;
}
/*SAMPLE-2 : BUTTON-2*/
.bt2:before{
content: "";
width: 100%;
height: 0;
position: absolute;
background-color: #9b59b6;
left: 0;
bottom: 0;
transition: 0.4s;
-moz-transition: 0.4s;
-ms-transition: 0.4s;
-o-transition: 0.4s;
-webkit-transition: 0.4s;
z-index: -1;
}
.bt2:after{
content: "";
width: 100%;
height: 0;
position: absolute;
background-color: #9b59b6;
right: 0;
top: 0;
transition: 0.4s;
-moz-transition: 0.4s;
-ms-transition: 0.4s;
-o-transition: 0.4s;
-webkit-transition: 0.4s;
z-index: -1;
}
.bt2:hover:before, .bt2:hover:after{
height: 50%;
}
.bt2:hover {
color: #fff;
}
/*SAMPLE-2 : BUTTON-3*/
.bt3:before{
content: "";
width: 0;
height: 100%;
position: absolute;
background-color: #ff5722;
left: 50%;
top: 0;
transition: 0.4s;
-moz-transition: 0.4s;
-ms-transition: 0.4s;
-o-transition: 0.4s;
-webkit-transition: 0.4s;
z-index: -1;
}
.bt3:after{
content: "";
width: 0;
height: 100%;
position: absolute;
background-color: #ff5722;
right: 50%;
top: 0;
transition: 0.4s;
-moz-transition: 0.4s;
-ms-transition: 0.4s;
-o-transition: 0.4s;
-webkit-transition: 0.4s;
z-index: -1;
}
.bt3:hover:before, .bt3:hover:after{
width: 50%;
}
.bt3:hover {
color: #fff;
}
/*SAMPLE-2 : BUTTON-4*/
.bt4:before{
content: "";
width: 0;
height: 100%;
position: absolute;
background-color: #1d8ef7;
left: 0;
top: 0;
transition: 0.4s;
-moz-transition: 0.4s;
-ms-transition: 0.4s;
-o-transition: 0.4s;
-webkit-transition: 0.4s;
z-index: -1;
}
.bt4:after{
content: "";
width: 0;
height: 100%;
position: absolute;
background-color: #1d8ef7;
right: 0;
top: 0;
transition: 0.4s;
-moz-transition: 0.4s;
-ms-transition: 0.4s;
-o-transition: 0.4s;
-webkit-transition: 0.4s;
z-index: -1;
}
.bt4:hover:before, .bt4:hover:after{
width: 50%;
}
.bt4:hover {
color: #fff;
}
/*SAMPLE-2 : BUTTON-5*/
.bt5 {
overflow: hidden;
}
.bt5 span {
position: absolute;
display: block;
width: 0;
height: 0;
border-radius: 50%;
left: -10px;
top: 70px;
background: #2ecc71;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transition: width 0.7s, height 0.7s;
-webkit-transition: width 0.7s, height 0.7s;
-moz-transition: width 0.7s, height 0.7s;
-ms-transition: width 0.7s, height 0.7s;
-o-transition: width 0.7s, height 0.7s;
z-index: -1;
}
.bt5:hover {
color: #ffffff;
}
.bt5:hover span {
width: 500px;
height: 500px;
}
.bt5:active {
background: #2ecc71;
}
/*SAMPLE-2 : BUTTON-6*/
.bt6 {
overflow:hidden;
}
.bt6:before {
content: '';
width: 0;
z-index:-1;
height: 0;
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
border-style: solid;
border-width: 0 0 0 0;
border-color: transparent transparent transparent #9b59b6;
position: absolute;
bottom: 0;
left: 0;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
}
.bt6:after {
content: '';
width: 0;
z-index:-1;
height: 0;
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
border-style: solid;
border-width: 0 0 0 0;
border-color: transparent #9b59b6 transparent transparent;
position: absolute;
top: 0;
right: 0;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
}
.bt6:hover {
color: white;
}
.bt6:hover:before {
border-width: 108px 0 0 108px;
}
.bt6:hover:after {
border-width: 0 108px 108px 0;
}
.bt6:active {
background: #b8ba35;
}
/*SAMPLE-2 : BUTTON-7*/
.bt7 {
overflow:hidden;
}
.bt7:after {
content: '';
width: 0;
height: 0;
z-index: -1;
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
border-style: solid;
border-width: 0 0 0 0;
border-color: transparent #ff5722 transparent transparent;
position: absolute;
top: 0;
right: 0;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
}
.bt7:before {
content: '';
width: 0;
height: 0;
z-index: -1;
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
border-style: solid;
border-width: 0 0 0 0;
border-color: transparent transparent transparent #ff5722;
position: absolute;
bottom: 0;
left: 0;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
}
.bt7:hover {
color: white;
}
.bt7:hover:before, .bt7:hover:after {
border-width: 80px 215px;
}
.bt7:active {
background: #ff5722;
}
/*SAMPLE-2 : BUTTON-8*/
.btn-layout.bt8:after {
position: absolute;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
content: '';
width: 0;
left: 50%;
bottom: 0;
height: 3px;
background: #1d8ef7;
}
.btn-layout.bt8:after {
height: 130%;
left: -10%;
transform: skewX(15deg);
-webkit-transform: skewX(15deg);
-moz-transform: skewX(15deg);
-ms-transform: skewX(15deg);
-o-transform: skewX(15deg);
z-index: -1;
}
.btn-layout.bt8:hover {
color: white;
}
.btn-layout.bt8:hover:after {
left: -10%;
width: 120%;
}
/*------------------------------SAMPLE-3------------------------------*/
/*FOR SAMPLE-3 : BUTTON-7,8*/
.btn-border-o:before, .btn-border-o:after, .btn-border-rev-o:before, .btn-border-rev-o:after {
transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
}
.bttn{
overflow:visible;
}
.bttn:after {
pointer-events: none;
position: absolute;
width: 100%;
border-radius: 3px;
height: 100%;
content: '';
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.bttn:before {
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
display: block;
-webkit-font-smoothing: antialiased;
}
/*SAMPLE-3 : BUTTON-1*/
.bttn.e1 {
-webkit-transition: background 0.2s, color 0.2s;
-moz-transition: background 0.2s, color 0.2s;
transition: background 0.2s, color 0.2s;
-ms-transition: background 0.2s, color 0.2s;
-o-transition: background 0.2s, color 0.2s;
}
.bttn.e1:hover, .bttn.e1:hover a {
color: #2ecc71;
border-color: #2ecc71;
}
.bttn.e1:after {
top: 5px;
left: 5px;
z-index: -1;
opacity: 0;
}
.bttn.e1.layer-1:after {
box-shadow: 1px 1px 2px 0px #2ecc71;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
-moz-transition: opacity 0.2s, -moz-transform 0.2s;
transition: opacity 0.2s, transform 0.2s;
-ms-transition: opacity 0.2s, -ms-transform 0.2s;
-o-transition: opacity 0.2s, -o-transform 0.2s;
}
.bttn.e1.layer-1:hover:after {
opacity: 1;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.bttn.e1.layer-1:before {
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-o-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.7;
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
-moz-transition: -moz-transform 0.2s, opacity 0.2s;
transition: transform 0.2s, opacity 0.2s;
-ms-transition: -ms-transform 0.2s, opacity 0.2s;
-o-transition: -o-transform 0.2s, opacity 0.2s;
}
.bttn.e1.layer-1:hover:before {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
/*SAMPLE-3 : BUTTON-2*/
.bttn.e2 {
-webkit-transition: background 0.2s, color 0.2s;
-moz-transition: background 0.2s, color 0.2s;
transition: background 0.2s, color 0.2s;
-ms-transition: background 0.2s, color 0.2s;
-o-transition: background 0.2s, color 0.2s;
}
.bttn.e2:hover, .bttn.e2:hover a {
color: #9b59b6;
border-color:#9b59b6;
}
.bttn.e2:after {
top: 5px;
left: 5px;
z-index: -1;
opacity: 0;
}
.bttn.e2.layer-2:after {
box-shadow: 0 0 0 white;
-webkit-transition: opacity 0.2s, box-shadow 0.2s;
-moz-transition: opacity 0.2s, box-shadow 0.2s;
transition: opacity 0.2s, box-shadow 0.2s;
-ms-transition: opacity 0.2s, box-shadow 0.2s;
-o-transition: opacity 0.2s, box-shadow 0.2s;
}
.bttn.e2.layer-2:hover:after {
opacity: 1;
box-shadow: 1px 1px 2px 0px #9b59b6;
}
.bttn.e2.layer-2:before {
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.7;
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
-moz-transition: -moz-transform 0.2s, opacity 0.2s;
transition: transform 0.2s, opacity 0.2s;
-ms-transition: -ms-transform 0.2s, opacity 0.2s;
-o-transition: -o-transform 0.2s, opacity 0.2s;
}
.bttn.e2.layer-2:hover:before {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
/*SAMPLE-3 : BUTTON-3*/
.bttn.e3 {
-webkit-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
-moz-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
transition: background 0.3s, color 0.3s, box-shadow 0.3s;
-o-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
-ms-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}
.bttn.e3:after {
display: none;
}
.bttn.e3:hover {
background: white;
color: #ff5722;
box-shadow: 0 0 0 5px hsla(14, 100%, 57%, 0.3);
border-color: hsla(14, 100%, 57%, 0.3);
}
.bttn.e3:hover a {
color: #ff5722;
}
.bttn.e3.layer-3:hover:before {
-webkit-animation: toRightFromLeft 0.3s forwards;
-moz-animation: toRightFromLeft 0.3s forwards;
animation: toRightFromLeft 0.3s forwards;
-ms-animation: toRightFromLeft 0.3s forwards;
-o-animation: toRightFromLeft 0.3.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0