[bes]

это особенность прорисовки браузером

<style>
.sbutton {
    background: #cb3131; /* Цвет фона */
    padding: 10px 5px; /* Поля вокруг текста */
    margin: 0px;
	font-size:14px;
	font-weight:600;
    color: #FFFFFF; /* Цвет шрифта */
    text-align: center; /* Надпись на кнопке по центру */
    border: solid 0px #73C8F0; /* Параметры рамки кнопки */
    cursor: pointer; /* Изменение вида курсора при наведении*/
	border-radius: 5px;
	overflow:hidden;
	opacity : 1;
}
</style>

<a id="btn" class="sbutton">Кнопка</a>

<script>
document.querySelector(".sbutton").addEventListener("click", function () {
	this.style.opacity = "0.5";
	var that = this;
	setTimeout(function () {
		myfunc(2000);
		that.style.opacity = 1;
	}, 0);
});
function myfunc(ms) {
	ms += new Date().getTime();
	while (new Date() < ms){
		console.log(ms);
	}
}
</script>

а здесь вычислять-вычисляю, но ни хрена не отображаю

<style>
.sbutton {
    background: #cb3131; /* Цвет фона */
    padding: 10px 5px; /* Поля вокруг текста */
    margin: 0px;
	font-size:14px;
	font-weight:600;
    color: #FFFFFF; /* Цвет шрифта */
    text-align: center; /* Надпись на кнопке по центру */
    border: solid 0px #73C8F0; /* Параметры рамки кнопки */
    cursor: pointer; /* Изменение вида курсора при наведении*/
	border-radius: 5px;
	overflow:hidden;
	opacity : 1;
}
</style>

<a id="btn" class="sbutton">Кнопка</a>

<script>
document.querySelector(".sbutton").addEventListener("click", function () {
	this.style.opacity = "0.5";
	myfunc(2000);
	this.style.opacity = 1;
});
function myfunc(ms) {
	ms += new Date().getTime();
	while (new Date() < ms){
		console.log(ms);
	}
}
</script>