Untitled

dabblet.css

.container{  
	position: relative;
	margin: 90px;
}

.dropdown{
	position: absolute;
	top: 110%;
	left: -50px;
	display: flex;
	flex-direction: column;
	border: 1px solid lightgray;
	overflow: hidden;
	transition: transform 0.4s, border-radius 0.5s; 
	transform-origin: top center;
	transform: scale(0);
	border-radius: 100%  100% 50% 50%;
	box-shadow: 0 5px 25px 2px rgba(0, 0, 0, 0.2);
}

.dropdown a{
	padding: 7px 13px;
	font-family: 'Helvetica';
	font-size: 15px;
	cursor: pointer;
	border: 1px solid rgb(250, 250, 250);

}

.active{
	transform: scale(1);
	border-radius: 0;
}

.dropdown a:hover{
	background-color: lightblue;
}	

.dropdown a:active{
	background-color: lightskyblue;
}

.dropdown a::selection{
	background: none;
}

dabblet.html

<div class="container">
	<button> Bana tıkla </button>
	<div class="dropdown">
		<a>gknasln@hotmail.com</a>
		<a>gknasln@gmail.com</a>
	</div>
</div>

dabblet.js

document.querySelector('button').addEventListener('click', function(){
	this.parentElement.querySelector('.dropdown').classList.toggle('active');
});

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}