/* 雪哥博客主页：xulgr.com
 * 文档：https://xulgr.com/technical/css/150
*/

body,button,dd,div,dl,dt,form,h1,h2,h3,h4,h5,h6,input,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0;-webkit-tap-highlight-color:rgba(0,0,0,0)}
a{text-decoration:none;}
a:active,a:hover{outline:0}
img{border:none}
li{list-style:none}
table{border-collapse:collapse;border-spacing:0}
h4,h5,h6{font-size:100%}
button,input,optgroup,option,select,textarea{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;outline:0}

.xulgrbtn {
  vertical-align:middle;
  -moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;
  outline:0;-webkit-appearance:none;transition:all .3s;-webkit-transition:all .3s;box-sizing:border-box;
  display:inline-block;
  height:38px;
  line-height:38px;
  padding:0 18px;
  background-color:#a511ae;
  color:#fff;
  white-space:nowrap;
  text-align:center;
  font-size:14px;
  border:none;
  border-radius:2px;
  cursor:pointer;/* 改变鼠标点击指针 */
}

/*默认透明度*/
.xulgrbtn:hover{
  opacity:1; /*指定不透明度，从0.0（完全透明）到1.0（完全不透明）*/
  filter:alpha(opacity=80);
  color:#fff;
}
.xulgrbtn:active{
  opacity:1;
  filter:alpha(opacity=100);
}
/* 按钮间距 */
.xulgrbtn+.xulgrbtn{margin-left:10px}

/* 圆角按钮 */
.xulgrbtn-radius{
  border-radius:100px;
}
.xulgrbtn-yj{
  border-radius:100px;
}
.xulgrbtn-yj-5{
  border-radius:5px;
}
.xulgrbtn-yj-10{
  border-radius:10px;
}
.xulgrbtn-yj-20{
  border-radius:20px;
}
.xulgrbtn-yj-30{
  border-radius:30px;
}
.xulgrbtn-yj-40{
  border-radius:40px;
}
.xulgrbtn-yj-50{
  border-radius:50px;
}
.xulgrbtn-yj-100{
  border-radius:100px;
}
.xulgrbtn-yj-200{
  border-radius:200px;
}




/* 白色背景+紫色文字 */
.xulgrbtn-bz{border:1px solid #a511ae;background-color:#fff;color:#a511ae}
/* 黑色背景+白色文字 */
.xulgrbtn-hb5{background-color:#000;color:#fff}

/* 加入透明度 */
.xulgrbtn-bzt{border:1px solid #6a6a6a;background-color:#fff;color:#a511ae;opacity: 0.8;}
.xulgrbtn-bzt2{border:1px solid #6a6a6a;background-color:rgba(255,255,255,0.9);color:#a511ae;}

/* 橙色背景+白色文字 */
.xulgrbtn-cb{background-color:#ff5f00;color:#ffffff}
.xulgrbtn-tmcb{background-color:#ff5f00;color:#ffffff}

/* 透明背景+橙色文字 */
.xulgrbtn-tmc{border:1px solid #ff5f00;background-color:transparent;color:#ff5f00}
/* 透明背景+紫色文字 */
.xulgrbtn-tmz{border:1px solid #a511ae;background-color:transparent;color:#a511ae}
/* 透明背景+白色文字 */
.xulgrbtn-tmb{border:1px solid #ffffff;background-color:transparent;color:#ffffff}
/* 透明背景+黑色文字 */
.xulgrbtn-tmh{border:1px solid #000000;background-color:transparent;color:#000000}
/* 透明背景+蓝色文字 */
.xulgrbtn-tml{border:1px solid #1E9FFF;background-color:transparent;color:#1E9FFF}
/* 透明背景+红色文字 */
.xulgrbtn-tmh2{border:1px solid #FF5722;background-color:transparent;color:#FF5722}
/* 透明背景+黄色文字 */
.xulgrbtn-tmh3{border:1px solid #FFB800;background-color:transparent;color:#FFB800}
/* 透明背景+绿色文字 */
.xulgrbtn-tml2{border:1px solid #01ca02;background-color:transparent;color:#01ca02}
/* 紫色背景+白色文字 */
.xulgrbtn-zb{border:1px solid #a511ae;background-color:#a511ae;color:#ffffff}
/* 蓝色背景+白色文字 */
.xulgrbtn-lb{background-color:#1E9FFF}
/* 红色背景+白色文字 */
.xulgrbtn-hb{background-color:#FF5722}
/* 黄色背景+白色文字 */
.xulgrbtn-hb2{background-color:#FFB800}
/* 绿色背景+白色文字 */
.xulgrbtn-lb2{background-color:#5FB878}
/* 黑色背景+白色文字 */
.xulgrbtn-hb3{background-color:#000000}
/* 白色背景+黑色文字 */
.xulgrbtn-bh{color:#000;background-color:#fff}
/* 微信色背景+白色文字 */
.xulgrbtn-wx{background-color:#07c160;color:#fff}
/* 支付宝色背景+白色文字 */
.xulgrbtn-ali{background-color:#1E9FFF;color:#fff}
/* 透明背景+微信色文字 */
.xulgrbtn-tmwx{background-color:transparent;color:#07c160}
/* 动漫站按压颜色 */
.xulgrbtn-out-acg:hover{background: linear-gradient(to bottom right,#f151af,#9265d9,#4d74f8);}


/* tv.xgwo.cn专用 */
.xulgrbtn-tv{background-color:#ff5f00;color:#fff;}
.xulgrbtn-tv2{border:1px solid #ff5f00;background-color:transparent;color:#ff5f00}
.xulgrbtn-out-tv:hover{border:1px solid #ff5f00;background-color:transparent;color:#ff5f00}
.xulgrbtn-out-tv2:hover{background-color:#ff5f00;color:#fff;}





/* 按下样式 紫色背景+白色文字 */
.xulgrbtn-out-bz:hover{background-color:#a511ae;color:#fff}
/* 按下样式 白色背景+黑色文字 */
.xulgrbtn-out-bh:hover{background-color:#fff;color:#000}
/* 按下样式 黑色背景+白色文字 */
.xulgrbtn-out-hb:hover{background-color:#000;color:#fff}
/* 按下样式 蓝色背景+白色文字 */
.xulgrbtn-out-lb:hover{background-color:#1E9FFF;color:#fff}
/* 按下样式 红色背景+白色文字 */
.xulgrbtn-out-hb2:hover{background-color:#FF5722;color:#fff}
/* 按下样式 黄色背景+白色文字 */
.xulgrbtn-out-hb3:hover{background-color:#FFB800;color:#fff}
/* 按下样式 绿色背景+白色文字 */
.xulgrbtn-out-lb2:hover{background-color:#01ca02;color:#fff}
/* 按下样式 橙色背景+白色文字 */
.xulgrbtn-out-cb:hover{background-color:#ff5f00;color:#fff}
/* 按下样式 浅蓝背景+紫色文字 */
.xulgrbtn-out-qlz:hover{background-color:#90cfff;color:#a511ae}
/* 按下样式 微信色背景+白色文字 */
.xulgrbtn-out-wx:hover{background-color:#01ca02;color:#fff}


/* 按下样式 黑色背景+白色文字 */
.xulgrbtn-out-hh:hover{background-color:#000;color:#fff}

/* 按下样式 透明背景+紫色文字 */
.xulgrbtn-out-tmbz:hover{background-color:transparent;color:#a511ae;border:1px solid #a511ae}
/* 按下样式 透明背景+白色文字 */
.xulgrbtn-out-tmbh:hover{background-color:transparent;color:#fff;border:1px solid #fff}
/* 按下样式 透明背景+黑色文字 */
.xulgrbtn-out-tmhb:hover{background-color:transparent;color:#000;border:1px solid #000}
/* 按下样式 透明背景+蓝色文字 */
.xulgrbtn-out-tmlb:hover{background-color:transparent;color:#1E9FFF;border:1px solid #1E9FFF}
/* 按下样式 透明背景+红色文字 */
.xulgrbtn-out-tmhb2:hover{background-color:transparent;color:#FF5722;border:1px solid #FF5722}
/* 按下样式 透明背景+黄色文字 */
.xulgrbtn-out-tmhb3:hover{background-color:transparent;color:#FFB800;border:1px solid #FFB800}
/* 按下样式 透明背景+绿色文字 */
.xulgrbtn-out-tmlb2:hover{background-color:transparent;color:#01ca02;border:1px solid #01ca02}

/* 按下样式 紫色文字+白色背景 */
.xulgrbtn-out-zb:hover{color:#a511ae;background-color:#ffffff;}
/* 按下样式 紫色文字+白色背景 */
.xulgrbtn-out-zb2:hover{color:#a511ae;background-color:#ffffff;}
/* 按下样式 紫色文字+透明背景 */
.xulgrbtn-out-zt:hover{color:#a511ae;background-color:transparent;}



/* 按钮大小 */
.xulgrbtn-lt{width:100%} /* 流体 */
.xulgrbtn-xg{height:54px;line-height:54px;padding:0 35px;font-size:26px}
.xulgrbtn-lg{height:44px;line-height:44px;padding:0 25px;font-size:16px}
.xulgrbtn-sm{height:30px;line-height:30px;padding:0 10px;font-size:12px}
.xulgrbtn-xs{height:22px;line-height:22px;padding:0 5px;font-size:12px}
.xulgrbtn-xm{height:20px;line-height:22px;padding:0 10px;font-size:10px}

.xulgrbtn-xg-bk{height:54px;line-height:49px;padding:0 35px 5px 35px;font-size:26px}
.xulgrbtn-lg-bk{height:44px;line-height:40px;padding:0 25px 4px 25px;font-size:16px}
.xulgrbtn-sm-bk{height:30px;line-height:27px;padding:0 10px 3px 10px;font-size:12px}


/* 按钮闪烁 白色字体+浅蓝渐变 */
.xulgrbtn-ss-bql{color: #fff;border:none;animation: twinkle 1s alternate infinite;}
@keyframes twinkle{from{background: #16e2eb;}to{background: #3b6e99;}}

/* 按钮闪烁 紫色字体+按下紫色字体+灰白渐变 */
.xulgrbtn-ss-zhb{color: #a511ae;border:none;animation: twinkle .9s alternate infinite;}
.xulgrbtn-ss-zhb:hover{color: #a511ae;}
@keyframes twinkle{from{background: #fff;}to{background: #cccccc;}}
 
/* 按钮闪烁 白色字体+按下黄色字体+蓝紫渐变 */
.xulgrbtn-ss-blz{color: #fff;border:none;animation: twinkle .9s alternate infinite;}
.xulgrbtn-ss-blz:hover{color: #fcff00;}
@keyframes twinkle{from{background: #004eff;}to{background: #a511ae;}}
 
/* 按钮闪烁 紫色字体+按下紫色字体+黄浅蓝渐变 */
.xulgrbtn-ss-zhql{color: #a511ae;border:none;animation: twinkle .6s alternate infinite;}
.xulgrbtn-ss-zhql:hover{color: #a511ae;}
@keyframes twinkle{from{background: #f0ff00;}to{background: #00fff6;}}
 

 
 
 
 
 
 
/*渐变颜色按钮*/
.xulgrbtn-jb{background: linear-gradient(to bottom right,#f151af,#9265d9,#4d74f8);}
.xulgrbtn-jb:hover{background: linear-gradient(to bottom right,#000,#000,#000);}

.xulgrbtn-jb-bk{background: linear-gradient(to bottom right,#f151af,#9265d9,#4d74f8);border:2px solid #fff;}
.xulgrbtn-jb-bk:hover{background: linear-gradient(to bottom right,#000,#000,#000);border:2px solid #3779ff;}

.xulgrbtn-jb-bk2{background: linear-gradient(to bottom right,#000,#000,#000);border:2px solid #3779ff;}
.xulgrbtn-jb-bk2:hover{background: linear-gradient(to bottom right,#f151af,#9265d9,#4d74f8);border:2px solid #fff;}

.xulgrbtn-jb-bbk{border:2px solid #fff;}

.xulgrbtn-jb2{background: linear-gradient(to bottom right,#a511ae,#ad359c,#5a2eff);}
.xulgrbtn-jb2:hover{background: linear-gradient(to bottom right,#000,#000,#000);}
 
 
 
 
 
/* pan.xulgr.com */
.xulgrbtn-pan{background: linear-gradient(to bottom right,#3779ff,#3f6de6,#4664d2);}
.xulgrbtn-pan:hover{background: linear-gradient(to bottom right,#000,#000,#000);}

.xulgrbtn-pan-bk{background: linear-gradient(to bottom right,#3779ff,#3f6de6,#4664d2);border:2px solid #fff;}
.xulgrbtn-pan-bk:hover{background: linear-gradient(to bottom right,#000,#000,#000);border:2px solid #3779ff;}
 
 
 
 /* xulgr.com */
.xulgrbtn-xulgr{background: linear-gradient(to bottom right,#1d9dff,#5fb9ff,#47afff);}
.xulgrbtn-xulgr:hover{background: linear-gradient(to bottom right,#000,#000,#000);}
 
 
/* av.xgwo.cn */
.xulgrbtn-av{background: linear-gradient(to bottom right,#00a2e3,#4171f1,#893aff);}
.xulgrbtn-av:hover{background: linear-gradient(to bottom right,#000,#000,#000);}

.xulgrbtn-av-bk{background: linear-gradient(to bottom right,#00a2e3,#4171f1,#893aff);border:2px solid #fff;}
.xulgrbtn-av-bk:hover{background: linear-gradient(to bottom right,#000,#000,#000);border:2px solid #00a2e3;}



/* v.xulgr.com */
.xulgrbtn-v-xulgr{background: linear-gradient(to bottom right,#0b9ae5,#4c68f2,#8042fd);}
.xulgrbtn-v-xulgr:hover{background: linear-gradient(to bottom right,#8042fd,#4c68f2,#0b9ae5);}





/* xg.ink */
.xg-ink-btn{
	background-image: linear-gradient(to left, #f80209 0%, #4234f5 51%, #f6d365 100%);
	text-transform: uppercase;
	transition: 0.5s;
	box-shadow: 0 0 20px #eee;
}
.xg-ink-btn:hover{
	background-position: right center;
}



.xg-ink-btn-bk{background: linear-gradient(to right,#f80209,#7f23a7,#4234f5);border:2px solid #fff;text-decoration:none;}
.xg-ink-btn-bk:hover{
	background: linear-gradient(to left,#f80209,#7f23a7,#4234f5);border:2px solid #fff;text-decoration:none;

      -webkit-transition: max-width 0.5s;
      -moz-transition: max-width 0.5s;
      transition: max-width 0.5s;
/*
    -webkit-transform: translateY(-8px);
    transform: translateY(-20px);
    -webkit-transition: -webkit-transform .5s;
    transition: -webkit-transform .5s;
    transition: transform .5s;
    transition: transform .5s,-webkit-transform .5s;
*/
}
 
 
 








