.zf-circle-btn {
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px;
    line-height: 0;
    transition: all 0.3s ease;
    cursor: pointer;
}
.zf-circle-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.zf-circle-btn--primary { background: #07C3D6; color: #fff; }
.zf-circle-btn--primary:hover:not(:disabled) { background: #1870D1; }

.zf-circle-btn--danger { background: #fd3649; color: #fff; }
.zf-circle-btn--danger:hover:not(:disabled) { background: #d62839; }

.zf-circle-btn--info { background: #1870D1; color: #fff; }
.zf-circle-btn--info:hover:not(:disabled) { background: #07C3D6; }

.zf-circle-btn svg,
.zf-circle-btn img {
    width: 14px;
    height: 14px;
}