<div class="multi-button">
<button>Cut</button>
<button>Copy</button>
<button>Paste</button>
</div>
body {
height: 100vh;
margin: 0;
display: grid;
place-items: center;
}
.multi-button {
filter: drop-shadow(3px 10px 15px rgba(0, 0, 0, 0.45));
}
.multi-button button{
height: 50px;
width: 100px;
background: linear-gradient(to bottom, #bada55, #da55bb);
font-weight: bold;
color: white;
font-size: 1.2rem;
border: none;
margin: -5px;
padding: 0;
stroke: black;
outline: none;
}
.multi-button :nth-child(1){
border-radius: 20px 0 0 20px;
}
.multi-button :nth-child(3){
border-radius: 0 20px 20px 0;
}
button:hover{
cursor: pointer;
filter: drop-shadow(3px 5px 5px rgba(0, 0, 0, 0.45));
}
button:active{
filter: none;
transform: scale(.95);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.