鬼谷網頁設計公司
LINE

CSS-hover效果

回列表icon

回列表

CSS - hover效果

分享簡單的hover效果

hover基本介紹
此篇是分享hover的效果
下載CSS後
將class加入你要放效果的按鈕內
就可以看到效果

html架構範例

<div class="效果的class" data-text="按鈕的名稱">
<span>按鈕的名稱</span>
</div>
  • mh1
    hover 效果
    .mh1 {
    	position: relative;
    	border: 1px solid rgba(0,0,0,0.5);
    	transition: all 0.5s linear;
    	}
    
    	.mh1:hover {
    	border-radius: 25px;
    	transition: all 0.5s linear;    
    	}
    	
  • mh2
    hover 效果
    .mh2 {
    	color: rgba(255,255,255,1);
    	transition: all 0.5s;
    	position: relative;
    	overflow: hidden;
    	border: 1px solid rgba(0,0,0,0.5);
    	}
    	.mh2:hover > span{
    	opacity: 0;
    	transform: translate(0px,-40px);
    	}
    	.mh2::after{
    	content: attr(data-text);
    	position: absolute;
    	width: 100%;
    	height: 100%;
    	top: 0;
    	left: 0;
    	opacity: 0;
    	transform: translate(0, 30%);
    	transition: all 0.3s;
    
    	}
    	.mh2:hover::after{
    	opacity: 1;
    	-webkit-transform: translate(0, 0);
    	transform: translate(0, 0);
    	}
  • mh3
    hover 效果
    .mh3 {
    	color: rgba(255,255,255,1);
    	-webkit-transition: all 0.5s;
    	-moz-transition: all 0.5s;
    	-o-transition: all 0.5s;
    	transition: all 0.5s;
    	position: relative;
    	border: 1px solid rgba(255,255,255,0.5);
    	overflow: hidden;
    	}
    
    
    	.mh3:hover > span{
    	opacity: 0;
    	-webkit-transform: translate(0px,40px);
    	transform: translate(0px,40px);
    	}
    	.mh3::after{
    	content: attr(data-text);
    	position: absolute;
    	width: 100%;
    	height: 100%;
    	line-height: 50px;
    	top: 0;
    	left: 0;
    	opacity: 0;
    	-webkit-transform: translate(-30%, 0);
    	transform: translate(-30%, 0);
    	transition: all 0.3s;   
    	}
    	.mh3:hover::after{
    	opacity: 1;
    	-webkit-transform: translate(0, 0);
    	transform: translate(0, 0);
    	}
  • mh4
    hover 效果
    .mh4 {
    	color: rgba(255,255,255,1);
    	transition: all 0.5s;
    	position: relative;
    	border: 1px solid rgba(255,255,255,0.5);
    	overflow: hidden;
    	}
    
    	.mh4 > span {
    
    	transition: all 0.3s;
    	}
    
    	.mh4:hover > span{
    	opacity: 0;
    	transform: translate(0px,40px);
    	}
    	.mh4::after{
    	content: attr(data-text);
    	position: absolute;
    	width: 100%;
    	height: 100%;
    	line-height: 50px;
    	top: 0;
    	left: 0;
    	opacity: 0;
    	transform: translate(-30%, -50%) rotate(-30deg);
    
    	transition: all 0.3s;   
    
    	}
    	.mh4:hover::after{
    	opacity: 1;
    	transform: translate(0, 0);
    	}
    	
  • mh5
    hover 效果
    .mh5{
    	transition: all 0.5s;
    	border: 1px solid rgba(255,255,255,0.5);
    	position: relative; 
    	}
    
    	.mh5 span{
    	z-index: 2; 
    	display: block;
    	position: absolute;
    	width: 100%;
    	height: 100%;   
    	}
    	.mh5::before{
    	content: '';
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
    	z-index: 1;
    	opacity: 0;
    	background-color: rgba(0,0,0,0.5);
    	transition: all 0.4s;
    	transform: scale(0.5, 1);
    	}
    	.mh5:hover::before{
    	opacity: 1;
    	-webkit-transform: scale(1, 1);
    	transform: scale(1, 1);
    	}
  • mh6
    hover 效果
    .mh6{
    transition: all 0.5s;
    border: 1px solid rgba(0,0,0,0.5);
    position: relative; 
    }
    
    .mh6 span{
    z-index: 2; 
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;   
    }
    .mh6:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    background-color: rgba(0,0,0,0.5);
    transition: all 0.4s;
    transform: scale(1, 0.5);
    }
    .mh6:hover::before{
    opacity: 1;
    transform: scale(1, 1);
    }
  • mh7
    hover 效果
    .mh7{
    color: rgba(255,255,255,1);
    
    transition: all 0.5s;
    border: 1px solid rgba(0,0,0,0.5);
    position: relative; 
    }
    
    .mh7 span{
    z-index: 2; 
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;   
    }
    .mh7:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    background-color: rgba(0,0,0,0.5);
    transition: all 0.3s;
    
    }
    .mh7:hover::before{
    opacity: 1;
    width: 100%;
    }
  • mh8
    hover 效果
    .mh8{
    color: rgba(255,255,255,1);
    transition: all 0.5s;
    border: 1px solid rgba(255,255,255,0.5);
    position: relative; 
    overflow: hidden;
    }
    .mh8 span{
    z-index: 2; 
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;   
    }
    .mh8:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    background-color: rgba(0,0,0,0.5);
    transition: all 0.5s;
    }
    .mh8:hover::before{
    opacity: 1;
    transform: skewX(-180deg)  scale(0.5,1);
    }
    
  • mh9
    hover 效果
    .mh9{
    transition: all 0.5s;
    position: relative; 
    }
    .mh9 span{
    z-index: 2; 
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;   
    }
    .mh9:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: all 0.5s;
    border: 1px solid rgba(0,0,0,0.5);
    background-color: #c76161;
    }
    .mh9:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: all 0.5s;
    border: 1px solid rgba(0,0,0,0.5);
    background-color: #c76161;
    
    }
    .mh9:hover::before{
    transform: rotate(-45deg);
    
    }
    .mh9:hover::after{
    transform: rotate(45deg);
    
    }
    .mh9:hover{
    background-color: rgba(0,0,0,0);
    color: #000;
    }
  • mh10
    hover 效果
    .mh10{
    transition: all 0.5s;
    position: relative;
    perspective: 2000px;    
    }
    
    .mh10 span{
    z-index: 2; 
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;   
    }
    .mh10:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: all 0.5s;
    border: 1px solid rgba(255,255,255,0.5);
    
    }
    .mh10:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: all 0.5s;
    border: 1px solid rgba(255,255,255,0.5);
    
    }
    .mh10:hover:before{
    transform: rotateX(60deg) translate(0px,45px) ; 
    background-color: rgba(255,255,255,0.25);
    }
    .mh10:hover:after{
    transform: rotateX(-60deg) translate(0px,-45px) ;   
    background-color: rgba(255,255,255,0.25);
    }
    .mh10:hover{
    color: #000;
    }
  • mh11
    hover 效果
    .mh11 {
    color: rgba(255,255,255,1);
    transition: all 0.5s;
    position: relative;
    }
    
    .mh11:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    border: 1px solid rgba(255,255,255,0.5);
    transition: all 0.3s;
    }
    .mh11:hover:before{
    opacity: 0;
    transform: scale(1.2,1.2);
    }
    .mh11:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    background-color: rgba(255,255,255,0.25);
    transition: all 0.3s;
    transform: scale(0.5,0.5);
    }
    .mh11:hover:after{
    opacity: 1 ;
    transform: scale(1,1);
    }
    
  • mh12
    hover 效果
    .mh12{
    color: rgba(255,255,255,1);
    transition: all 0.5s;
    position: relative;
    }
    
    .mh12:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(255,255,255,0.25);
    transition: all 0.3s;
    
    }
    .mh12:hover:before{
    opacity: 0 ;
    transform: scale(0.5,0.5);
    }
    .mh12:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    transition: all 0.3s;
    border: 1px solid rgba(255,255,255,0.5);
    transform: scale(1.2,1.2);
    }
    .mh12:hover:after{
    opacity: 1;
    transform: scale(1,1);
    }
  • mh13
    hover 效果
    .mh13 {
    color: rgba(255,255,255,1);
    transition: all 0.5s;
    position: relative;
    border: 1px solid rgba(255,255,255,0.5);
    overflow: hidden;
    }
    
    .mh13:before, .mh13:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(255,255,255,0.25);
    transition: all 0.3s;
    transform: translate(0,-100%);
    transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
    }
    .mh13:after{
    transition-delay: 0.2s;
    }
    .mh13:hover:before, .mh13:hover:after{
    transform: translate(0,0);
    }
    
  • mh14
    hover 效果
    .mh14 {
    color: rgba(255,255,255,1);
    transition: all 0.3s;
    position: relative;
    border: 1px solid rgba(0,0,0,0.5);
    overflow: hidden;
    }
    
    .mh14:before, .mh14:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(0,0,0,0.25);
    transition: all 0.3s;
    transform: translate(-100%,0);
    transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
    }
    .mh14:after{
    transition-delay: 0.2s;
    }
    .mh14:hover:before, .mh14:hover::after{
    transform: translate(0,0);  
    }
    
  • mh15
    hover 效果
    .mh15 {
    color: rgba(255,255,255,1);
    transition: all 0.3s;
    position: relative;
    border: 1px solid rgba(255,255,255,0.5);
    overflow: hidden;
    }
    
    .mh15:before, .mh15:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(0,0,0,0.25);
    transition: all 0.3s;
    transform: translate(-35%,-190%) rotate(-30deg);
    transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
    }
    .mh15:after{
    transition-delay: 0.2s;
    }
    .mh15:hover::before, .mh15:hover::after{
    transform: translate(0,0);  
    }
    
    
  • mh16
    hover 效果
    .mh16 {
    color: rgba(255,255,255,1);
    transition: all 0.3s;
    position: relative;
    border: 1px solid rgba(255,255,255,0.5);
    overflow: hidden;
    }
    
    .mh16:before, .mh16:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(0,0,0,0.25);
    transition: all 0.3s;
    transform: translate(35%,190%) rotate(-30deg);
    transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
    }
    .mh16:after{
    transition-delay: 0.2s;
    }
    .mh16:hover::before, .mh16:hover::after{
    transform: translate(0,0);  
    }
    
    
  • mh17
    hover 效果
    .mh17{
    color: rgba(255,255,255,1);
    transition: all 0.3s;
    position: relative;
    border: 1px solid rgba(255,255,255,0.5);
    overflow: hidden;
    }
    
    .mh17:before{
    content: '';
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(0,0,0,0.25);
    transition: all 0.3s;
    transform: translate(35%,190%) rotate(-30deg);
    transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
    }
    .mh17:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(0,0,0,0.25);
    transition: all 0.3s;
    transform: translate(-35%,-190%) rotate(-30deg);
    transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
    }
    .mh17:before{
    transition-delay: 0.2s;
    }
    .mh17:hover::before, .mh17:hover::after{
    transform: translate(0,0);  
    }
    
  • mh18
    hover 效果
    .mh18 {
    color: rgba(255,255,255,1);
    transition: all 0.3s;
    position: relative;
    border: 1px solid rgba(255,255,255,0.5);
    overflow: hidden;
    }
    
    .mh18:before{
    content: '';
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(0,0,0,0.25);
    transition: all 0.3s;
    transform: translate(35%,-190%) rotate(30deg);
    transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
    }
    .mh18:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(0,0,0,0.25);
    transition: all 0.3s;
    transform: translate(-35%,-190%) rotate(-30deg);
    transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
    }
    .mh18:before{
    transition-delay: 0.2s;
    }
    .mh18:hover:before, .mh18:hover:after{
    transform: translate(0,0);  
    }
    
    
  • mh19
    hover 效果
    .mh19 {
    color: rgba(255,255,255,1);
    transition: all 0.3s;
    position: relative;
    border: 1px solid rgba(255,255,255,0.5);
    overflow: hidden;
    }
    
    .mh19:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    
    transition: all 0.3s;
    opacity: 1;
    transform: translate(0,-105%);
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgba(0,0,0,1);
    background-color: rgba(0,0,0,0.25);
    }
    .mh19:hover:before{
    opacity: 0;
    transform: translate(0,0);  
    }
    
    
  • mh20
    hover 效果
    .mh20 {
    color: rgba(255,255,255,1);
    transition: all 0.5s;
    position: relative;
    border: 1px solid rgba(255,255,255,0.5);
    overflow: hidden;
    }
    .mh20:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: all 0.5s;
    opacity: 1;
    transform: translate(-105%,0);
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: rgba(0,0,0,1);
    background-color: rgba(0,0,0,0.25);
    }
    .mh20:hover:before{
    opacity: 0;
    transform: translate(0,0);  
    }
上一篇 下一篇