title: After CSS styling a button, the text is not showing up
body: <p>I am currently trying to learn some HTML and CSS for fun and made what I think a pretty cool button for my "enter page" but after adding the last effects the text does not show up. after removing the "border-left,right,top" the text shows but the box loses the full effect. I currently have the button set up to display in the center of the screen while I have a background image that takes the full page up. The colors are meant to be similar to work with the background image and i have checked they shouldn't blend into each other</p>
  
  <p>CSS Code</p>
  
  <pre><code>input.Button {
    text-align: center;
    position: absolute;
    top: 50%;
    width: 40%;
    height: 100px;
    margin-left: 30%;
    margin-right: 30%;
    background: #000000;
    color: #000000;
    opacity: 0.3;
    font-size: 400%;
    color: snow;
    font-family: "Impact", Charcoal, serif;
    letter-spacing: 0.3em;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid slategray;
  }
  </code></pre>
  
  <p>Edit: HTML Code</p>
  
  <pre><code>&lt;body&gt;
    &lt;div class="image"&gt;
      &lt;img src="landingpage.jpg"&gt;
      &lt;div class="button"&gt;
       &lt;form&gt;
         &lt;input class="Button" type="button" value="Enter" onclick="window.location.href='about.html'" /&gt;
       &lt;/form&gt;
     &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>input.Button {
    text-align: center;
    position: absolute;
    top: 50%;
    width: 40%;
    height: 100px;
    margin-left: 30%;
    margin-right: 30%;
    background: #000000;
    color: #000000;
    opacity: 0.3;
    font-size: 400%;
    color: snow;
    font-family: "Impact", Charcoal, serif;
    letter-spacing: 0.3em;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid slategray;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div class="image"&gt;
      &lt;img src="landingpage.jpg"&gt;
      &lt;div class="button"&gt;
        &lt;form&gt;
          &lt;input class="Button" type="button" value="Enter" onclick="window.location.href='about.html'" /&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>