XenForo Hack Statüs Nasıl Yapılır? [Animasyonlu]

[root]

XenForo Hack Statüs Nasıl Yapılır? [Animasyonlu]
Demo

Widget/HTML: HTML tabanlı bir widget oluşturup şablon kısmına yapıştırın.

<button class="hackstatus hackstatus-loader hackstatus-loader_xr icon-loader">Lorem Ipsum</button>
<button class="hackstatus hackstatus-undetected hackstatus-undetected_xr icon-undetected">Lorem Ipsum</button>
<button class="hackstatus hackstatus-detected hackstatus-detected_xr icon-detected">Lorem Ipsum</button>
<button class="hackstatus hackstatus-updating hackstatus-updating_xr icon-updating">Lorem Ipsum</button>
<button class="hackstatus hackstatus-public_beta hackstatus-public_beta_xr icon-public_beta">Lorem Ipsum</button>
<button class="hackstatus hackstatus-priv_beta hackstatus-priv_beta_xr icon-priv_beta">Lorem Ipsum</button>

Css: Extra.less şablonuna yapıştırın.

CSS:
.hackstatus {
    border: none;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
    cursor: pointer;
    padding: 25px 80px;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    outline: none;
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    margin: 2px;
}

.hackstatus:after {
    content: '';
    position: absolute;
    z-index: -1;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.hackstatus:before,
.icon-heart:after,
.icon-star:after,
.icon-plus:after,
.icon-file:before {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    position: relative;
    -webkit-font-smoothing: antialiased;
}

.icon-loader:before {
    font-family: 'Font Awesome 5 Pro';
    content: "\f019";
}

.icon-undetected:before {
    font-family: 'Font Awesome 5 Pro';
    content: "\f560";
}

.icon-detected:before {
    font-family: 'Font Awesome 5 Pro';
    content: "\f00d";
}

.icon-updating:before {
    font-family: 'Font Awesome 5 Pro';
    content: "\f361";
}

.icon-public_beta:before {
    font-family: 'Font Awesome 5 Pro';
    content: "\f3c2";
}

.icon-priv_beta:before {
    font-family: 'Font Awesome 5 Pro';
    content: "\f30d";
}
//--------------------------------------------------------------------------------------------
.hackstatus-undetected {
    background: #24522a;
    color: #fff;
    max-width: 100%;
    max-height: 40px;
    min-width: 100%;
    min-height: 40px;
    white-space: nowrap;
}

.hackstatus-undetected:hover {
    background: #24522ad9;
}

.hackstatus-undetected:active {
    background: #222627;
    top: 2px;
}

.hackstatus-undetected:before {
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    line-height: 2;
    font-size: 140%;
    width: 60px;
}

.hackstatus-undetected_xr {
    padding: 10px 55px 8px 85px;
    border-radius: 10px;
}

.hackstatus-undetected_xr:before {
    background: #416145;
    color: #ffffff;
    z-index: 2;
    border-radius: 10px 0 0 10px;
}

.hackstatus-undetected_xr:after {
    width: 20px;
    height: 20px;
    background: #416145;
    z-index: 1;
    left: 55px;
    top: 50%;
    margin: -10px 0 0 -10px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.hackstatus-undetected_xr:active:before {
    color: #CECED5;
}

.hackstatus-undetected_xr:active {
    top: 0;
}

.hackstatus-undetected_xr:active:after {
    left: 60px;
}
//--------------------------------------------------------------------------------------------
.hackstatus-detected {
    background: #9f0404;
    color: #fff;
    max-width: 100%;
    max-height: 40px;
    min-width: 100%;
    min-height: 40px;
    white-space: nowrap;
}

.hackstatus-detected:hover {
    background: #9f0404ad;
}

.hackstatus-detected:active {
    background: #222627;
    top: 2px;
}

.hackstatus-detected:before {
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    line-height: 2;
    font-size: 140%;
    width: 60px;
}

.hackstatus-detected_xr {
    padding: 10px 55px 8px 85px;
    border-radius: 10px;
}

.hackstatus-detected_xr:before {
    background: #dc0d0d;
    color: #ffffff;
    z-index: 2;
    border-radius: 10px 0 0 10px;
}

.hackstatus-detected_xr:after {
    width: 20px;
    height: 20px;
    background: #dc0d0d;
    z-index: 1;
    left: 55px;
    top: 50%;
    margin: -10px 0 0 -10px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.hackstatus-detected_xr:active:before {
    color: #CECED5;
}

.hackstatus-detected_xr:active {
    top: 0;
}

.hackstatus-detected_xr:active:after {
    left: 60px;
}
//--------------------------------------------------------------------------------------------
.hackstatus-updating {
    background: #ed900e;
    color: #fff;
    max-width: 100%;
    max-height: 40px;
    min-width: 100%;
    min-height: 40px;
    white-space: nowrap;
}

.hackstatus-updating:hover {
    background: #ed900eb8;
}

.hackstatus-updating:active {
    background: #222627;
    top: 2px;
}

.hackstatus-updating:before {
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    line-height: 2;
    font-size: 140%;
    width: 60px;
}

.hackstatus-updating_xr {
    padding: 10px 55px 8px 85px;
    border-radius: 10px;
}

.hackstatus-updating_xr:before {
    background: #ff9c12;
    color: #ffffff;
    z-index: 2;
    border-radius: 10px 0 0 10px;
}

.hackstatus-updating_xr:after {
    width: 20px;
    height: 20px;
    background: #ff9c12;
    z-index: 1;
    left: 55px;
    top: 50%;
    margin: -10px 0 0 -10px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.hackstatus-updating_xr:active:before {
    color: #CECED5;
}

.hackstatus-updating_xr:active {
    top: 0;
}

.hackstatus-updating_xr:active:after {
    left: 60px;
}
//--------------------------------------------------------------------------------------------
.hackstatus-public_beta {
    background: #1c3e5c;
    color: #fff;
    max-width: 100%;
    max-height: 40px;
    min-width: 100%;
    min-height: 40px;
    white-space: nowrap;
}

.hackstatus-public_beta:hover {
    background: #1c3e5cd1;
}

.hackstatus-public_beta:active {
    background: #222627;
    top: 2px;
}

.hackstatus-public_beta:before {
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    line-height: 2;
    font-size: 140%;
    width: 60px;
}

.hackstatus-public_beta_xr {
    padding: 10px 55px 8px 85px;
    border-radius: 10px;
}

.hackstatus-public_beta_xr:before {
    background: #275277;
    color: #ffffff;
    z-index: 2;
    border-radius: 10px 0 0 10px;
}

.hackstatus-public_beta_xr:after {
    width: 20px;
    height: 20px;
    background: #275277;
    z-index: 1;
    left: 55px;
    top: 50%;
    margin: -10px 0 0 -10px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.hackstatus-public_beta_xr:active:before {
    color: #CECED5;
}

.hackstatus-public_beta_xr:active {
    top: 0;
}

.hackstatus-public_beta_xr:active:after {
    left: 60px;
}
//--------------------------------------------------------------------------------------------
.hackstatus-priv_beta {
    background: #5b2180;
    color: #fff;
    max-width: 100%;
    max-height: 40px;
    min-width: 100%;
    min-height: 40px;
    white-space: nowrap;
}

.hackstatus-priv_beta:hover {
    background: #5b2180c2;
}

.hackstatus-priv_beta:active {
    background: #222627;
    top: 2px;
}

.hackstatus-priv_beta:before {
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    line-height: 2;
    font-size: 140%;
    width: 60px;
}

.hackstatus-priv_beta_xr {
    padding: 10px 55px 8px 85px;
    border-radius: 10px;
}

.hackstatus-priv_beta_xr:before {
    background: #7524a9;
    color: #ffffff;
    z-index: 2;
    border-radius: 10px 0 0 10px;
}

.hackstatus-priv_beta_xr:after {
    width: 20px;
    height: 20px;
    background: #7524a9;
    z-index: 1;
    left: 55px;
    top: 50%;
    margin: -10px 0 0 -10px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.hackstatus-priv_beta_xr:active:before {
    color: #CECED5;
}

.hackstatus-priv_beta_xr:active {
    top: 0;
}

.hackstatus-priv_beta_xr:active:after {
    left: 60px;
}
//--------------------------------------------------------------------------------------------
.hackstatus-loader {
    background: #222627;
    color: #fff;
    max-width: 100%;
    max-height: 40px;
    min-width: 100%;
    min-height: 40px;
    white-space: nowrap;
}

.hackstatus-loader:hover {
    background: #222627;
}

.hackstatus-loader:active {
    background: #222627;
    top: 2px;
}

.hackstatus-loader:before {
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    line-height: 2;
    font-size: 140%;
    width: 60px;
}

.hackstatus-loader_xr {
    padding: 10px 55px 8px 85px;
    border-radius: 10px;
}

.hackstatus-loader_xr:before {
    background: #2d3335;
    color: #ffffff;
    z-index: 2;
    border-radius: 10px 0 0 10px;
}

.hackstatus-loader_xr:after {
    width: 20px;
    height: 20px;
    background: #2d3335;
    z-index: 1;
    left: 55px;
    top: 50%;
    margin: -10px 0 0 -10px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.hackstatus-loader_xr:active:before {
    color: #CECED5;
}

.hackstatus-loader_xr:active {
    top: 0;
}

.hackstatus-loader_xr:active:after {
    left: 60px;
}