lin-view-ui/lib/theme-chalk/hover-effect.css

vue components library

.lin-hover-effect{position:relative;padding:10px 20px;overflow:hidden;font-weight:300;border:0;outline:0}.lin-hover-effect-theme-neon{background-color:transparent;transition:all .3s}.lin-hover-effect-theme-neon.lin-hover-effect-type-primary{color:#409eff;border:1px solid #409eff}.lin-hover-effect-theme-neon.lin-hover-effect-type-primary:hover{color:#fff;background-color:#409eff;border-color:#409eff;box-shadow:10px 10px 99px 6px #409eff}.lin-hover-effect-theme-neon.lin-hover-effect-type-success{color:#67c23a;border:1px solid #67c23a}.lin-hover-effect-theme-neon.lin-hover-effect-type-success:hover{color:#fff;background-color:#67c23a;border-color:#67c23a;box-shadow:10px 10px 99px 6px #67c23a}.lin-hover-effect-theme-neon.lin-hover-effect-type-info{color:#909399;border:1px solid #909399}.lin-hover-effect-theme-neon.lin-hover-effect-type-info:hover{color:#fff;background-color:#909399;border-color:#909399;box-shadow:10px 10px 99px 6px #909399}.lin-hover-effect-theme-neon.lin-hover-effect-type-warning{color:#e6a23c;border:1px solid #e6a23c}.lin-hover-effect-theme-neon.lin-hover-effect-type-warning:hover{color:#fff;background-color:#e6a23c;border-color:#e6a23c;box-shadow:10px 10px 99px 6px #e6a23c}.lin-hover-effect-theme-neon.lin-hover-effect-type-danger{color:#f56c6c;border:1px solid #f56c6c}.lin-hover-effect-theme-neon.lin-hover-effect-type-danger:hover{color:#fff;background-color:#f56c6c;border-color:#f56c6c;box-shadow:10px 10px 99px 6px #f56c6c}.lin-hover-effect-theme-border{box-sizing:border-box;background:0 0}.lin-hover-effect-theme-border::after,.lin-hover-effect-theme-border::before{position:absolute;box-sizing:inherit;width:0;height:0;content:"";border:2px solid transparent}.lin-hover-effect-theme-border::after{right:0;bottom:0}.lin-hover-effect-theme-border::before{top:0;left:0}.lin-hover-effect-theme-border:hover::after,.lin-hover-effect-theme-border:hover::before{width:100%;height:100%}.lin-hover-effect-theme-border:hover::before{transition:width .3s ease-out,height .3s ease-out .3s}.lin-hover-effect-theme-border:hover::after{transition:border-color 0s ease-out .6s,width .3s ease-out .6s,height .3s ease-out 1s}.lin-hover-effect-theme-border.lin-hover-effect-type-primary{color:#409eff}.lin-hover-effect-theme-border.lin-hover-effect-type-primary:hover::before{border-top-color:#409eff;border-right-color:#409eff}.lin-hover-effect-theme-border.lin-hover-effect-type-primary:hover::after{border-bottom-color:#409eff;border-left-color:#409eff}.lin-hover-effect-theme-border.lin-hover-effect-type-success{color:#67c23a}.lin-hover-effect-theme-border.lin-hover-effect-type-success:hover::before{border-top-color:#67c23a;border-right-color:#67c23a}.lin-hover-effect-theme-border.lin-hover-effect-type-success:hover::after{border-bottom-color:#67c23a;border-left-color:#67c23a}.lin-hover-effect-theme-border.lin-hover-effect-type-info{color:#909399}.lin-hover-effect-theme-border.lin-hover-effect-type-info:hover::before{border-top-color:#909399;border-right-color:#909399}.lin-hover-effect-theme-border.lin-hover-effect-type-info:hover::after{border-bottom-color:#909399;border-left-color:#909399}.lin-hover-effect-theme-border.lin-hover-effect-type-warning{color:#e6a23c}.lin-hover-effect-theme-border.lin-hover-effect-type-warning:hover::before{border-top-color:#e6a23c;border-right-color:#e6a23c}.lin-hover-effect-theme-border.lin-hover-effect-type-warning:hover::after{border-bottom-color:#e6a23c;border-left-color:#e6a23c}.lin-hover-effect-theme-border.lin-hover-effect-type-danger{color:#f56c6c}.lin-hover-effect-theme-border.lin-hover-effect-type-danger:hover::before{border-top-color:#f56c6c;border-right-color:#f56c6c}.lin-hover-effect-theme-border.lin-hover-effect-type-danger:hover::after{border-bottom-color:#f56c6c;border-left-color:#f56c6c}.lin-hover-effect-theme-fillet{color:#fff;border-radius:10px;transition:border-radius 1s}.lin-hover-effect-theme-fillet.lin-hover-effect-type-primary{background:#409eff}.lin-hover-effect-theme-fillet.lin-hover-effect-type-success{background:#67c23a}.lin-hover-effect-theme-fillet.lin-hover-effect-type-info{background:#909399}.lin-hover-effect-theme-fillet.lin-hover-effect-type-warning{background:#e6a23c}.lin-hover-effect-theme-fillet.lin-hover-effect-type-danger{background:#f56c6c}.lin-hover-effect-theme-fillet:hover{border-top-left-radius:50px;border-top-right-radius:10px;border-bottom-right-radius:50px;border-bottom-left-radius:10px}.lin-hover-effect-theme-frozen{color:#fff;border-radius:50px}.lin-hover-effect-theme-frozen::before{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%;content:"";background:linear-gradient(to left,rgba(255,255,255,0) 50%,rgba(255,255,255,.4) 50%);background-position:right bottom;background-size:210% 100%;border-radius:50px;transition:all 1s}.lin-hover-effect-theme-frozen.lin-hover-effect-type-primary{background:linear-gradient(to right,#409eff,#4240ff);box-shadow:0 4px 15px 0 #409eff}.lin-hover-effect-theme-frozen.lin-hover-effect-type-primary:hover:before{background-position:left bottom}.lin-hover-effect-theme-frozen.lin-hover-effect-type-success{background:linear-gradient(to right,#67c23a,#3ac251);box-shadow:0 4px 15px 0 #67c23a}.lin-hover-effect-theme-frozen.lin-hover-effect-type-success:hover:before{background-position:left bottom}.lin-hover-effect-theme-frozen.lin-hover-effect-type-info{background:linear-gradient(to right,#909399,#929099);box-shadow:0 4px 15px 0 #909399}.lin-hover-effect-theme-frozen.lin-hover-effect-type-info:hover:before{background-position:left bottom}.lin-hover-effect-theme-frozen.lin-hover-effect-type-warning{background:linear-gradient(to right,#e6a23c,#d5e63c);box-shadow:0 4px 15px 0 #e6a23c}.lin-hover-effect-theme-frozen.lin-hover-effect-type-warning:hover:before{background-position:left bottom}.lin-hover-effect-theme-frozen.lin-hover-effect-type-danger{background:linear-gradient(to right,#f56c6c,#f5b16c);box-shadow:0 4px 15px 0 #f56c6c}.lin-hover-effect-theme-frozen.lin-hover-effect-type-danger:hover:before{background-position:left bottom}.lin-hover-effect-theme-shiny{background:0 0}.lin-hover-effect-theme-shiny.lin-hover-effect-type-primary{color:#409eff;border:2px solid #409eff}.lin-hover-effect-theme-shiny.lin-hover-effect-type-primary::after{background:#409eff}.lin-hover-effect-theme-shiny.lin-hover-effect-type-success{color:#67c23a;border:2px solid #67c23a}.lin-hover-effect-theme-shiny.lin-hover-effect-type-success::after{background:#67c23a}.lin-hover-effect-theme-shiny.lin-hover-effect-type-info{color:#909399;border:2px solid #909399}.lin-hover-effect-theme-shiny.lin-hover-effect-type-info::after{background:#909399}.lin-hover-effect-theme-shiny.lin-hover-effect-type-warning{color:#e6a23c;border:2px solid #e6a23c}.lin-hover-effect-theme-shiny.lin-hover-effect-type-warning::after{background:#e6a23c}.lin-hover-effect-theme-shiny.lin-hover-effect-type-danger{color:#f56c6c;border:2px solid #f56c6c}.lin-hover-effect-theme-shiny.lin-hover-effect-type-danger::after{background:#f56c6c}.lin-hover-effect-theme-shiny::after{position:absolute;top:-36px;left:-100px;display:block;width:50px;height:125px;content:"";opacity:20%;transform:rotate(-45deg)}.lin-hover-effect-theme-shiny:hover::after{left:120%;transition:all 1s cubic-bezier(.3,1,.2,1)}