How to remove background from button

Question

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.

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

HTML:

<!-- Trigger/Open The Modal -->
<button class="subscribe" id="subscribe">Button</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close"></span>
    </div>
    <div class="modal-body">
      <p>Subscribe to the Galaxy Mailing List</p>
      <p>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.</p>
        <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">Manage Your Account</a>
    </div>
  </div>

</div>

CSS

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}
}

Screenshot: https://i.stack.imgur.com/R5bcE.jpg

Any help greatly appreciated and thanks in advance.

Ise button.subscribe{ background : transparent !important} and let me know it it helped or not — mzparacha, Aug 18 '19 at 18:21

score 10 · Answer 1 · 2019-08-18T18:40:17.797

10

Typically, HTML buttons have default style. But you can change buttons' appearance with CSS.

.b1 {
    border: none;
    background: none;
    cursor: pointer;
    margin: 0;
    padding: 0;
}

<button class="b1">I'm a button</button>

edited Aug 18 '19 at 18:40

answered Aug 18 '19 at 18:32

score 2 · Answer 2 · answered Aug 18 '19 at 20:22

2

button.subscribe {
    background:none;
    border:none;
}

answered Aug 18 '19 at 20:22

abelpronet

89
1
9

It would be better to add some explanation to your code. – Masoud Rahimi Aug 19 '19 at 05:02

score 1 · Answer 3 · answered Aug 18 '19 at 18:23

1

button { background: unset !important;
border: unset !important;
outline: unset !important; }

answered Aug 18 '19 at 18:23

Cuong Hoang

558
1
3
14

Never knew about `unset`. Had to override DokuWiki's settings without access to the CSS stylesheet files. Thanks so much! – velkoon Mar 07 '20 at 23:52

score 0 · Answer 4 · answered Aug 18 '19 at 18:23

It's just got a border showing, add border:none;

button.subscribe{
    background:none;
    border: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}
}

<!-- Trigger/Open The Modal -->
<button class="subscribe" id="subscribe">Button</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close"></span>
    </div>
    <div class="modal-body">
      <p>Subscribe to the Galaxy Mailing List</p>
      <p>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.</p>
        <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">Manage Your Account</a>
    </div>
  </div>

</div>

score 0 · Answer 5 · edited Aug 20 '19 at 14:49

0

You should set background color of button transparent

    button.subscribe {background-color: transparent;border: none; outline: none;}

edited Aug 20 '19 at 14:49

halfer

19,824
17
99
186

answered Aug 18 '19 at 18:30

Jenish Patel

48
6

2

Please refrain from rolling back good edits. – halfer Aug 20 '19 at 14:50

How to remove background from button

5 Answers5