How to remove background from button : <p>I have got a basic button where you click it and it shows a modal, but I am unable to get the button transparent so that it does not have a background but just the text is visible.</p>

<p>I have search on here and google, including w3 school for a solution but I have been unsuccessful </p>

<p>HTML:</p>

<pre><code>&lt;!-- Trigger/Open The Modal --&gt;
&lt;button class="subscribe" id="subscribe"&gt;Button&lt;/button&gt;

&lt;!-- The Modal --&gt;
&lt;div id="myModal" class="modal"&gt;

  &lt;!-- Modal content --&gt;
  &lt;div class="modal-content"&gt;
    &lt;div class="modal-header"&gt;
      &lt;span class="close"&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="modal-body"&gt;
      &lt;p&gt;Subscribe to the Galaxy Mailing List&lt;/p&gt;
      &lt;p&gt;Welcome to the Galaxy Games Subscription Management page. Galaxy mailing lists are the best way to get the early word on all our game announcements, official launches, contests, special events, and more. Make sure you're enlisted to receive all
        the updates.&lt;/p&gt;
        &lt;a href="https://socialclub.galaxy-games.co.uk/settings/email" class="manage" target="_blank" click="closeSection()" data-gtm-category="Footer" data-gtm-action="Social Club" data-gtm-label="Manage Subscription Account"&gt;Manage Your Account&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;

&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>button.subscribe{
    background:none;
}
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  -webkit-animation-name: fadeIn; /* Fade in the background */
  -webkit-animation-duration: 0.4s;
  animation-name: fadeIn;
  animation-duration: 0.4s
}

/* Modal Content */
.modal-content {
  position: fixed;
  bottom: 0;
  background-color: #fefefe;
  width: 100%;
  -webkit-animation-name: slideIn;
  -webkit-animation-duration: 0.4s;
  animation-name: slideIn;
  animation-duration: 0.4s
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 2px 16px;
  background-color: #000;
  color: white;
}

.modal-body {
    padding: 2px 16px;}

.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

/* Add Animation */
@-webkit-keyframes slideIn {
  from {bottom: -300px; opacity: 0} 
  to {bottom: 0; opacity: 1}
}

@keyframes slideIn {
  from {bottom: -300px; opacity: 0}
  to {bottom: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}

@keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}
</code></pre>

<p>Screenshot:
<a href="https://imgur.com/6MMxjLy" rel="nofollow noreferrer">https://imgur.com/6MMxjLy</a></p>

<p>Any help greatly appreciated and thanks in advance.</p>
