[image has the design][1]Image describes the design I want. What i have tried is, i have kept three buttons together and tried putting z-index , position absolute , relative, but didnt worked.
https://i.sstatic.net/7OxFO.png
The code i have tried is, i have applied three buttons together : 123
and what i am getting is looks something like this [This is the image what i made] https://i.sstatic.net/ruxL5.png
See this example. Home you got what you want. http://embed.plnkr.co/ExU03A42KNqr6XakFo4I/
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>
button{
width:120px;
height:40px;
margin:-5px;
background:#ee5353;
border:1px solid gray;
border-radius:3px;
}
button:nth-child(2){
height:60px;
position:relative;z-index:2;
}
</style>
</head>
<body>
<button>1</button>
<button>2</button>
<button>3</button>
</body>
</html>