title: Put an Image Over Button in Html
body: <p>I want to design a button like</p>
  <p><a href="https://i.stack.imgur.com/upEjc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/upEjc.png" alt="enter image description here" /></a></p>
  <p>I write a code that create a button</p>
  <p>CSS</p>
  <pre><code> .button {
          color: white;
          width: 10%;
          font-size: 15pt;
          padding: .5em 1em;
          cursor: pointer;
          box-shadow: 2px 2px 5px hsla(0,0%,0%,.7);
          text-shadow: 0px 0px 1px hsla(0,0%,0%,.8);
          border-radius: 5px;
          margin: 1em;
          background-image: -webkit-radial-gradient(50% 0%,160% 100%,hsla(0,0%,100%,.3),hsla(0,0%,100%,.3) 50%,hsla(0,0%,100%,0) 52%, hsla(0,30%,400%,0));
          background-color: orange;
          text-align: right;
          display: inline-block;
      }
  
      img {
          margin-top: -35%;
          margin-left: -20%;
          display: block;
      }
  </code></pre>
  <p>HTML</p>
  <pre><code>&lt;button class=&quot;button&quot;&gt;&lt;img src=&quot;img/Play.png&quot; /&gt;Play&lt;/button&gt;
  </code></pre>
  <p>but the resualt is</p>
  <p><a href="https://i.stack.imgur.com/VzEeZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VzEeZ.png" alt="enter image description here" /></a></p>
  <p>can anyone help me that how i put img in left side over button?</p>