CSS超美鼠标感应按钮特效

<!DOCTYPE html>
<html >

<head>
  <meta charset="UTF-8">
  <title>CSS3自定义样式超链接按钮DEMO演示</title>
  <style>
/*
Hi! If my code is useful for you can you donate me some money? 
https://www.paypal.me/melnik909
*/

/*
=====
DEMO DEPENDENCIES
=====
*/

@import "https://stas-melnikov.ru/r-blocks/r-button.css";
@import "https://stas-melnikov.ru/r-blocks/r-link.css";

/*
* core styles
*/

.ai-element{
--uiaiElementDisplay: var(--aiElementDisplay, inline-flex);
--uiaiElementTextColor: var(--aiElementTextColor);
--uiaiElementTextColorHover: var(--aiElementTextColorHover);

display: var(--uiaiElementDisplay);
color: var(--uiaiElementTextColor);
position: relative;
overflow: hidden;
}

.ai-element__label{
display: block;
}

/* ai-element_padding-all */ 

.ai-element_padding-all{
--uiaiElementLineWeight: var(--aiElementLineWeight, 2px);
--uiaiElementLineColor: var(--aiElementLineColor, #000);
--uiaiElementPadding: var(--aiElementPadding, 5px);

padding: var(--uiaiElementPadding);
}

.ai-element_padding-all::before, 
.ai-element_padding-all::after{
width: 100%;
height: var(--uiaiElementLineWeight);
left: 0;
}

.ai-element_padding-all::before{
top: 0;
}

.ai-element_padding-all::after{
bottom: 0;
}

.ai-element_padding-all .ai-element__label::before,
.ai-element_padding-all .ai-element__label::after{
width: var(--uiaiElementLineWeight);
height: 100%;
top: 0;
}

.ai-element_padding-all .ai-element__label::before{
left: 0;
}

.ai-element_padding-all .ai-element__label::after{
right: 0;
}

.ai-element_padding-all::before,
.ai-element_padding-all::after,
.ai-element_padding-all .ai-element__label::before,
.ai-element_padding-all .ai-element__label::after{
content: "";     
background-color: var(--uiaiElementLineColor);
position: absolute; 
opacity: 1;

will-change: transform, opacity;
transition-property: opacity, -webkit-transform;
transition-property: transform, opacity;
transition-property: transform, opacity, -webkit-transform;
}

.ai-element_padding-all:hover::before,
.ai-element_padding-all:hover::after,
.ai-element_padding-all:hover .ai-element__label::before,
.ai-element_padding-all:hover .ai-element__label::after{
opacity: 0;
}

/* ai-element_padding-bottom */ 

.ai-element_padding-bottom{
--uiaiElementLineWeight: var(--aiElementLineWeight, 2px);
--uiaiElementLineColor: var(--aiElementLineColor, #000);

padding-bottom: var(--uiaiElementLineWeight);
position: relative;
}

.ai-element_padding-bottom::after{
content: "";
width: 100%;
height: var(--uiaiElementLineWeight);
background-color: var(--uiaiElementLineColor);

position: absolute;
left: 0;
bottom: 0;
}

/* ai-element_bg */ 

.ai-element_bg {
--uiaiElementLineColor: var(--aiElementLineColor, #000);
--uiaiElementTextColor: var(--aiElementTextColor, #fff);
--uiaiElementTextColorHover: var(--aiElementTextColorHover, #000);
--uiaiElementPadding: var(--aiElementPadding, 5px);

padding: var(--uiaiElementPadding);
transition: color .3s ease-out;
}

.ai-element_bg::before, 
.ai-element_bg::after{
content: "";
background-color: var(--uiaiElementLineColor);
opacity: 1;
position: absolute;

transition: opacity .35s ease-out .03s, -webkit-transform .35s ease-out;

transition: transform .35s ease-out, opacity .35s ease-out .03s;

transition: transform .35s ease-out, opacity .35s ease-out .03s, -webkit-transform .35s ease-out;
}

.ai-element_bg .ai-element__label{
position: relative;
z-index: 2;
}

.ai-element_bg:hover::before, 
.ai-element_bg:hover::after{
opacity: 0;
transition-delay: 0s;
}

.ai-element_bg:hover{
color: var(--uiaiElementTextColorHover);
}

/* ai-element_text */ 

.ai-element_text::before{
content: attr(data-ai-element-text);
color: var(--uiaiElementTextColorHover);
position: absolute;
}

.ai-element_text::before, 
.ai-element_text .ai-element__label{
transition-property: -webkit-transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
transition-timing-function: cubic-bezier(.86, .6, .08, 1.01); 
transition-duration: .4s;
}

.ai-element_text:hover::before,
.ai-element_text:hover .ai-element__label{
transition-duration: .3s;
}

/* effect 1 */

.ai-element1::before,
.ai-element1::after,
.ai-element1 .ai-element__label::before,
.ai-element1 .ai-element__label::after{
-webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
transition-timing-function: ease-out;
transition-duration: .2s, .15s;
}

.ai-element1:hover::before,
.ai-element1:hover::after,
.ai-element1:hover .ai-element__label::before,
.ai-element1:hover .ai-element__label::after{
transition-duration: .25s;
}

.ai-element1:hover::before{
-webkit-transform: translate3d(-105%, 0, 0);
        transform: translate3d(-105%, 0, 0);
}

.ai-element1:hover::after{
-webkit-transform: translate3d(105%, 0, 0);
        transform: translate3d(105%, 0, 0);
}

.ai-element1:hover .ai-element__label::before{
-webkit-transform: translate3d(0%, -100%, 0);
        transform: translate3d(0%, -100%, 0);
}

.ai-element1:hover .ai-element__label::after{
-webkit-transform: translate3d(0%, 100%, 0);
        transform: translate3d(0%, 100%, 0);
}

/* effect 2 */

.ai-element2::after{
-webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
transition: -webkit-transform .2s ease-in;
transition: transform .2s ease-in;
transition: transform .2s ease-in, -webkit-transform .2s ease-in;
}

.ai-element2:hover::after{
-webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
}

/* effect 3 */

.ai-element3::after{
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
transition: opacity .3s ease-out, -webkit-transform .3s ease-out;
transition: transform .3s ease-out, opacity .3s ease-out;
transition: transform .3s ease-out, opacity .3s ease-out, -webkit-transform .3s ease-out;
}

.ai-element3:hover::after{
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
}

/* effect 4 */

.ai-element4::before,
.ai-element4::after,
.ai-element4 .ai-element__label::before,
.ai-element4 .ai-element__label::after{
transition-timing-function: ease-out;
transition-duration: .2s, .2s;
-webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
}

.ai-element4:hover::before,
.ai-element4:hover::after,
.ai-element4:hover .ai-element__label::before,
.ai-element4:hover .ai-element__label::after{
transition-delay: 0s, .05s;
}

.ai-element4:hover::before{
-webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
}

.ai-element4:hover::after{
-webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
}

.ai-element4:hover .ai-element__label::before{
-webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
}

.ai-element4:hover .ai-element__label::after{
-webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
}

/* effect 5 */

.ai-element5::before,
.ai-element5::after, 
.ai-element5 .ai-element__label::before,
.ai-element5 .ai-element__label::after{
transition-duration: .2s;
transition-timing-function: ease-out;
-webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
}

.ai-element5::before, 
.ai-element5::after{
width: 100%;
height: var(--uiaiElementLineWeight);
left: 0;
}

.ai-element5 .ai-element__label::before,
.ai-element5 .ai-element__label::after{
width: var(--uiaiElementLineWeight);
height: 100%;
top: 0;
}

.ai-element5::before{
top: 0;
}

.ai-element5::after{
bottom: 0;
}

.ai-element5 .ai-element__label::before{
left: 0;
}

.ai-element5 .ai-element__label::after{
right: 0;
}

.ai-element5:hover::before,
.ai-element5:hover .ai-element__label::before{
transition-delay: 0s;
}

.ai-element5::after,
.ai-element5:hover .ai-element__label::after{
transition-delay: .25s;
}

.ai-element5 .ai-element__label::after,
.ai-element5:hover::after{
transition-delay: .15s;
}

.ai-element5 .ai-element__label::before,
.ai-element5:hover::before{
transition-delay: .35s;
}

.ai-element5:hover::before{
-webkit-transform: translate3d(-105%, 0, 0);
        transform: translate3d(-105%, 0, 0);
}

.ai-element5:hover::after{
-webkit-transform: translate3d(105%, 0, 0);
        transform: translate3d(105%, 0, 0);
}

.ai-element5:hover .ai-element__label::before{
-webkit-transform: translate3d(0, 105%, 0);
        transform: translate3d(0, 105%, 0);
}

.ai-element5:hover .ai-element__label::after{
-webkit-transform: translate3d(0, -105%, 0);
        transform: translate3d(0, -105%, 0);
}

/* effect 6 */

.ai-element6::before,
.ai-element6::after{
width: 50%;
height: 100%;
top: 0;
-webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);  
}

.ai-element6::before{
left: 0;
}

.ai-element6::after{
right: 0;
}

.ai-element6:hover::before{
-webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
}

.ai-element6:hover::after{
-webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
}

/* effect 7 */

.ai-element7::before,
.ai-element7::after{
width: 100%;
height: 50%;
left: 0;
-webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
}

.ai-element7::before{
top: 0;
}

.ai-element7::after{
bottom: 0;
}

.ai-element7:hover::before{
-webkit-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0);
}

.ai-element7:hover::after{
-webkit-transform: translate3d(0, 50%, 0);
        transform: translate3d(0, 50%, 0); 
}

/* effect 8 */

.ai-element8::before,
.ai-element8::after{
width: 51%;
height: 100%;
-webkit-transform: rotate(0);
        transform: rotate(0);
top: 0;
}

.ai-element8::before{
left: 0;
}

.ai-element8::after{
right: 0;
}

.ai-element8:hover::before,
.ai-element8:hover::after{
-webkit-transform: rotate(360deg);
        transform: rotate(360deg);
}

/* effect 9 */

.ai-element9::before,
.ai-element9::after{
width: 51%;
height: 100%;
top: 0; 
-webkit-transform: translate3d(0, 0, 0); 
        transform: translate3d(0, 0, 0);
}

.ai-element9::before{
left: 0;
}

.ai-element9::after{
right: 0;
}

.ai-element9:hover::before{
-webkit-transform: translate3d(-100%, 0, 0) rotate(-45deg);
        transform: translate3d(-100%, 0, 0) rotate(-45deg);
}

.ai-element9:hover::after{
-webkit-transform: translate3d(100%, 0, 0) rotate(-45deg);
        transform: translate3d(100%, 0, 0) rotate(-45deg);
}

/*
SETTINGS
*/

.ai-element{
--aiElementPadding: 10px 15px;
--aiElementLineWeight: 5px;
--aiElementLineColor: #243aab;
--aiElementTextColor: #1b255a;
--aiElementTextColorHover: #243aab;
}

.ai-element_bg{
--aiElementTextColor: #fff;
}
body{
  font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Open Sans", "Helvetica Neue", "Segoe UI", "Arial", sans-serif;
  font-size: 16px;
  margin: 0;
  text-transform: uppercase;
}

@media (min-width: 1200px){

 .secs{
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
 }
}

.section{
  display: flex;
  min-height: 300px;
  text-align: center;

  font-size: 17px;
  font-weight: 700;
}

.section:nth-child(2n+1){
  background-color: #f1f4fa;
}

.section__item{
  margin: auto;
}

.section__box:nth-child(n+2){
  margin-top: 40px;
}
</style>
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
<div>
<div>
<div>
<div>
<a href="#0" class="r-link ai-element ai-element_padding-bottom ai-element2">
<span>I'm a link</span>
</a>
</div>
<div>
<button class="r-button ai-element ai-element_padding-bottom ai-element2">
<span>I'm a button</span>
</button>
</div>
</div>
</div>
<div>
<div>
<div>
<a href="#0" class="r-link ai-element ai-element_padding-bottom ai-element3">
<span>I'm a link</span>
</a>
</div>
<div>
<button class="r-button ai-element ai-element_padding-bottom ai-element3">
<span>I'm a button</span>
</button>
</div>
</div>
</div>
<div>
<div>
<div>
<a href="#0" class="r-link ai-element ai-element_padding-all ai-element1">
<span>I'm a link</span>
</a>
</div>
<div>
<button class="r-button ai-element ai-element_padding-all ai-element1">
<span>I'm a button</span>
</button>
</div>
</div>
</div>
<div>
<div>
<div>
<a href="#0" class="r-link ai-element ai-element_padding-all ai-element4">
<span>I'm a link</span>
</a>
</div>
<div>
<button class="r-button ai-element ai-element_padding-all ai-element4">
<span>I'm a button</span>
</button>
</div>
</div>
</div>
<div>
<div>
<div>
<a href="#0" class="r-link ai-element ai-element_padding-all ai-element5">
<span>I'm a link</span>
</a>
</div>
<div>
<button class="r-button ai-element ai-element_padding-all ai-element5">
<span>I'm a button</span>
</button>
</div>
</div>
</div>
<div>
<div>
<div>
<a href="#0" class="r-link ai-element ai-element_bg ai-element6">
<span>I'm a link</span>
</a>
</div>
<div>
<button class="r-button ai-element ai-element_bg ai-element6">
<span>I'm a button</span>
</button>
</div>
</div>
</div>
<div>
<div>
<div>
<a href="#0" class="r-link ai-element ai-element_bg ai-element7">
<span>I'm a link</span>
</a>
</div>
<div>
<button class="r-button ai-element ai-element_bg ai-element7">
<span>I'm a button</span>
</button>
</div>
</div>
</div>
<div>
<div>
<div>
<a href="#0" class="r-link ai-element ai-element_bg ai-element8">
<span>I'm a link</span>
</a>
</div>
<div>
<button class="r-button ai-element ai-element_bg ai-element8">
<span>I'm a button</span>
</button>
</div>
</div>
</div>
<div>
<div>
<div>
<a href="#0" class="r-link ai-element ai-element_bg ai-element9">
<span>I'm a link</span>
</a>
</div>
<div>
<button class="r-button ai-element ai-element_bg ai-element9">
<span>I'm a button</span>
</button>
</div>
</div>
</div>
</div>
</body>

</html>


评论者:[[ schemeInfo.user.username ]]

评论内容:[[ schemeInfo.pbody ]]

评论时间:[[ schemeInfo.ptime ]]





发表你的评论:

提交评论
上一篇:
下一篇: