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;
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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