How to style a button like the image?-CodePudding

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;

}

CodePudding user response：

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>

CodePudding user response：

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();">