How to style a button like the image? - html

Question

I am trying to create a button like this image with PURE CSS. Please could you help me with the CSS ?
This Image
I am trying using below but not giving exact same result -
.styled {
border: 0 !important;
line-height: 2.5;
font-weight: bold;
text-align: center !important;
color: rgba(11,44,20,255) !important;
border-radius: 8px !important;
padding: 5px 16px 5px 16px;
transition: 0.2s all;
background-image: linear-gradient(to top left,
rgba(0, 0, 0, .2),
rgba(0, 0, 0, .2) 100%,
rgba(0, 0, 0, 0)) !important;
box-shadow: inset 7px 7px 3px rgba(255, 255, 255, .6),
inset -7px -7px 3px rgba(0, 0, 0, .7) !important;
}

Answer 1

This is closest as I can get without the button background. You can try experimenting with CSS gradients until you hit the actual angle.
#button{
width: 69px;
height: 34px;
position: relative;
background: #3F4E4C;
background: -webkit-radial-gradient(bottom right, #3F4E4C, #7CD9BA);
background: -moz-radial-gradient(bottom right, #3F4E4C, #7CD9BA);
background: radial-gradient(to top left, #3F4E4C, #7CD9BA);
border: none;
outline: none;
border-radius: 8px;
}
#external{
position: absolute;
top: 6px;
left: 6px;
background: #3ade66;
width: calc(100% - 12px);
height: calc(100% - 12px);
border-radius: 6px;
text-align:center;
color: black;
line-height: 2.2;
font-size: 10px;
font-weight: bold;
}
<button id="button">
<div id="external">Start</div>
</button>

Answer 2

Add an onclick event to the image.
function myFunction() {
alert("Button clicked");
};
img {
/*Disables dragging of the image*/
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
/*Sets the mouse to pointer when hovered*/
cursor: pointer;
}
<img src="https://i.stack.imgur.com/Rggof.png" onclick="myFunction();">

Answer 3

Got the similar view using -
.styled {
border: 0 !important;
line-height: 2.5;
font-weight: bold;
text-align: center !important;
color: rgba(11,44,20,255) !important;
border-radius: 10px !important;
transition: 0.2s all;
background-image: linear-gradient(to top left,
rgba(0, 0, 0, .2),
rgba(0, 0, 0, .2) 100%,
rgba(0, 0, 0, 0)) !important;
box-shadow: inset 6px 6px 1px rgba(255, 255, 255, .3),
inset -6px -6px 1px rgba(0, 0, 0, .3) !important;
}