<div class="avatar border-radius">
	<div class="grad border-radius spin"></div>
	<a href="#" class="link" id="profile">
		<img src="https://i.pinimg.com/originals/e6/07/a9/e607a9f494d1c111d2fc5922b2ffed24.png" class="avatar-img border-radius" />
		<div class="live-marker">Live</div>
	</a>
</div>

<button class="toggle-br">
	<i class="lni lni-ban icon" style="margin-right: 4px;"></i>Toggle <span>border-radius</span>
</button>

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@700&display=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background: #0e0e10;
 	height: 100vh;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.avatar {
	height: 74px;
	width: 74px;
	position: relative;
    order: 0;
    flex: 0 1 auto;
    align-self: auto;
}

.avatar:before {
	content: ":hover state on";
	display: inline-block;
	position: absolute;
	left: -70px;
	top: -80px;
	height: 40px;
	line-height: 40px;
	width: 200px;
	text-align: center;
	color: #1e1e21;
	font-weight: 400;
    font-size: 1.2em;
	text-shadow: 1px 0 0 rgba(0,0,0,0.5);
	font-family: 'Roboto Mono', monospace;
}

.grad {
	height: inherit;
	width: inherit;
	background: linear-gradient(180deg, #21db7b 80%, #db21a0);
	position: absolute;
}

.avatar-img {
	height: 70px;
	width: 70px;
	background: blue;
	border: 2px solid black;
	position: absolute;
	margin: 2px 0 0 2px;
	z-index: 99;
	overflow: hidden;
}

.border-radius {
	border-radius: 9000px;
}

.live-marker {
	background: crimson;
    position: relative;
    z-index: 100;
    height: 20px;
    width: 40px;
    text-transform: uppercase;
    border-radius: 15%/25%;
    line-height: 16px;
    text-align: center;
    border: 2px solid #000;
    font-family: sans-serif;
    font-size: 12px;
    padding-top: 1px;
    top: 59px;
	left: 50%;
	margin-left: -20px;
	text-shadow: 1px 0 0 rgba(0,0,0,0.4);
}

.spin {
  animation-duration: 1s;
  animation-name: spin;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

a.link {
	color: #f1f1f1;
	text-decoration: none;
}

a.link:hover {
	cursor: pointer;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

button.toggle-br {
	    order: 0;
    flex: 0 1 auto;
    align-self: auto;
	margin-top: 100px;
	color: #fff;
	padding: .6em 1em;
	border-radius: .4em;
	outline: none;
	border: none;
	font-size: 14px;
	font-weight: 700;
	font-family: 'Roboto', sans-serif;
	background: #9147ff;
	cursor: pointer;
	transition: background 200ms ease;
}
button.toggle-br:hover {
	background: #a66bff;
}

button.toggle-br span {
	font-weight: 400;
	font-family: 'Roboto Mono', monospace;
}

button.toggle-br .icon {
	color: #a66bff;
	transition: color 200ms ease;
}

button.toggle-br:hover .icon {
/* 	color: #9147ff; */
	color: #9147ff;
}

button.toggle-br .active {
	color: #1d1d1d;
}

$(function() {
	var avatar = $('#profile'),
		spinner = $('.grad'),
		icon = $('.icon');
	
	// avatar.hover(
	// 	function() {
	// 		spinner.addClass('spin');
	// 	}, function() {
	// 		spinner.removeClass('spin');
	// 	}
	// );
	
	var toggle = $('button.toggle-br');
	
	toggle.on('click',function() {
		let a = $("[class*='avatar']"),
			b = $(".grad");
		let merge = $.merge(a, b);
		
		if (a.hasClass('border-radius')) {
			merge.removeClass('border-radius');
			icon.addClass('active');
		} else {
			merge.addClass('border-radius');
			icon.removeClass('active');
		}
	});

	
});