.btn {
 background: #d2d4d2;
    background-image: -webkit-linear-gradient(top, #d2d4d2, #8f9294);
    background-image: -moz-linear-gradient(top, #d2d4d2, #8f9294);
    background-image: -ms-linear-gradient(top, #d2d4d2, #8f9294);
    background-image: -o-linear-gradient(top, #d2d4d2, #8f9294);
    background-image: linear-gradient(to bottom, #d2d4d2, #8f9294);
    -webkit-border-radius: 2;
    -moz-border-radius: 2;
    border-radius: 2px;
   
    color: #ffffff;
    font-size: 11px;
    padding: 2px 17px 5px 12px;
    text-decoration: none;
}
        .hi-icon {
      display: inline-block;
    font-size: 0px;
    cursor: pointer;
    margin-top: 3px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    text-align: left;
    position: absolute;
    z-index: 1;
    margin-top: -3px;
    margin-left: -9px;
          
        }

        hi-icons {
            background-color: #10e900;
        }





        /* Effect 8 */
        .hi-icon-effect-8 .hi-icon {
            background: red;
            -webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
            -moz-transition: -moz-transform ease-out 0.1s, background 0.2s;
            transition: transform ease-out 0.1s, background 0.2s;
            background: red;
            -webkit-transform: scale(0.93);
            -moz-transform: scale(0.93);
            -ms-transform: scale(0.93);
            transform: scale(0.93);
            color: #fff;
            -webkit-animation: sonarEffect 5s ease-out 1s;
            -moz-animation: sonarEffect 5s ease-out 1s;
            animation: sonarEffect 5s ease-out 1ms;
        }

        @-webkit-keyframes sonarEffect {
            0% {
                opacity: 0.3;
            }

            40% {
                opacity: 0.5;
                box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);
            }

            100% {
                box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);
                -webkit-transform: scale(1.5);
                opacity: 0;
            }
        }

        @-moz-keyframes sonarEffect {
            0% {
                opacity: 0.3;
            }

            40% {
                opacity: 0.5;
                box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);
            }

            100% {
                box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);
                -moz-transform: scale(1.5);
                opacity: 0;
            }
        }

        @keyframes sonarEffect {
            0% {
                opacity: 0.3;
            }

            40% {
                opacity: 0.5;
                box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);
            }

            100% {
                box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);
                transform: scale(1.5);
                opacity: 0;
            }
        }