Appearance with grey background color instead of transparency

After attempting to remove the background-color attribute, I noticed that the background remains a shade of grey instead of becoming transparent. Here is the code snippet:

CSS:


#contact-form button[type="submit"] {
    position: absolute;
    width: 100%;
    margin: 100px 0 5px;
    padding: 10px;
    font-size: 15px;
    height: 50px;
    max-width: 372px;
    border: 1px solid white;
    border-radius: 15px;
    color: white;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: 0.5s;
}

#contact-form button[type="submit"]:hover {
    background-color: #fff;
    color: #2D2D2D;
}

Answer №1

Consider using background:transparent; instead of background:#fff;. This will change the background color to "white" and not make it transparent, which could potentially resolve the issue. Additionally, as suggested by @blackandorangecat, there may be conflicting CSS in your code that needs to be removed.

For more information on background CSS properties, you can visit https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-color&preval=transparent

Answer №2

If you'd like the button to remain hidden until hovered over, simply include background:transparent; in the initial CSS rule. I incorporated the background of the form to demonstrate its functionality.

#contact-form button[type="submit"] {
  position: absolute;
  width: 100%;
  margin: 100px 0 5px;
  padding: 10px;
  font-size: 15px;
  height: 50px;
  max-width: 372px;
  border: 1px solid white;
  border-radius: 15px;
  color: white;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: 0.5s;
  background: transparent; /* Adding this made all the difference */
}

#contact-form button[type="submit"]:hover {
  background-color: #fff;
  color: #2D2D2D;
}

form {
  background-color: red;
  height: 200px;
}
<form id="contact-form">

  <button type="submit" value="Submit">Click Me!</button>

</form>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to position the tooltip text so it doesn't affect the layout when hidden?

Explore this link for the code snippet Here's the code that indicates when a tooltip is not displayed, it still occupies space. What methods can be implemented to position tooltip divs in a way that they don't take up space when hidden and avoi ...

Bootstrap Navigation Bar Animation causing Input Fields to be cut off

I am working with a collapsible bootstrap NavBar that contains two elements within the collapsible <div>, <form class="form-inline> and <select class="custom-select" id="menu"> (Refer to my code below) The problem I'm encountering ...

Images in CSS not copied to the output directory when using Webpack

Using Webpack to bundle various javascript and css files on a website includes bundling bootstrap.css and chosen.css as part of the bundles. To achieve this, there is a main.js file serving as an entry point for importing all necessary files. The process i ...

Unrecognized files located within the same directory

My main.html file located in the templates folder also contains three additional files: date.js, daterangepicker.js, and daterangepicker.css. Despite including them in the head of the HTML as shown below: <script type="text/javascript" src="date.js"> ...

Creating a bordered triangle using only CSS

Looking to create a message holder with a triangular tip bordered shape? I've successfully crafted the tip using two triangles: #triangle-border { width: 0px; height: 0px; border-style: solid; border-width: 0 100px 80px 100px; bor ...

What is the proper way to select the <ul> element within an FTL template?

Can someone provide guidance on how to target a <ul> container within a freemarker template using JavaScript? My goal is to display the content of this specific <ul> element in my FreeMarker template on the web page. Any suggestions on how I ...

Is it possible to use -webkit-transform with dual background layers?

I've implemented a unique animation for a div that features two semi-transparent backgrounds: /* Custom keyframes for the animated background DIV. */ @-webkit-keyframes wind { 0% { background-position: 0px 0px, 0px 0px; } 100 ...

Identifying the HTML tag under the cursor with TWebBrowser

Is there a way to determine which HTML tag, specifically a hyperlink, the caret is currently on? procedure THTMLEdit.ShowTag; var CursorPos: TPoint; HtmlElement: IHTMLElement; iHTMLDoc: IHtmlDocument2; begin if Supports(wbBrowser.Document, IHt ...

Pressing a button will reset the input spinner in Bootstrap

Is there a way to reset the bootstrap input spinner by clicking a button? I attempted using document.getelementbyId().value = "0" and also tried using reset(), but neither method worked. Any suggestions on how to successfully reset it? function resetScor ...

Is there a way to transfer the data from a `HtmlService.createHtmlOutput()` to a variable after clicking the `submit` button event?

The code snippet below is encountering an issue where arrayStored is not defined in the submit function. I attempted to retrieve the value of arrayStored using the e.parameter method, but it did not work as expected. As a newcomer to HtmlService, I am cu ...

Conceal rows in a table that are not selected using Jquery when the table has been loaded from a given URL

Below is the HTML code for an user search input field and the results table: <div class="input-group"> <input type="text" id="q" class="form-control" placeholder="Search for User"> <span class="input-group-btn"> ...

What causes fieldset to behave differently within a flex container across various browsers?

Here is a code example I created: <div style="display:flex;flex-direction:row;width:100%"> <fieldset style="white-space: nowrap; width:100%; overflow:auto"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed moll ...

Improving the efficiency of rendering multiple objects on a canvas

I'm currently working on developing a simulation for ants using the basic Javascript canvas renderer. Here is a snippet of the rendering code: render(simulation) { let ctx = this.ctx; // Clearing previous frame ctx.clearRect(0, ...

Expanding Div Heights that Adjust to the Browser's Width

Looking to set up a responsive height for a div, almost there but facing some distortion when resizing the browser. Here is the fiddle file for reference: https://jsfiddle.net/td5n8ky9/10/ The issue lies in the bottom 2 divs - aiming for a grey bar the wi ...

Beginner experiencing website overflow problem

After completing a basic web development course, I decided to create my first homepage. While I am satisfied with how it looks on a PC or laptop, the layout gets messy on mobile devices. I tried using <meta name="viewport" content="width= ...

Scraping Secrets: Unraveling the Art of Procuring User Links

I need assistance with extracting links from the group members' page on Meetup: response.css('.text--ellipsisOneLine::attr(href)').getall() Can you please help me understand why this code is not functioning correctly? This is the HTML stru ...

Tips for modifying the class of a span inline element using a javascript function

Looking for assistance in creating a password text box with an eye icon that toggles visibility. When the user clicks on the eye icon, it should change to a crossed-out eye icon and switch the input type to text. <div class="input-group show-hide-passw ...

"Click-to-Submit Button Triggering Error Notification before Redirecting to New Page

I am looking to implement an error message for a button and then redirect the user to a specific URL. However, I am unsure of how to achieve this using JQuery as I am relatively new to it. The idea is that the user uploads a file and then clicks on the Sub ...

Rotating Social Media Symbols - bootstrap 4

I am looking to incorporate a Social Button Footer similar to the one in this CodePen example: (https://codepen.io/vpdemo/pen/WbMNJv). However, my buttons are not appearing as circles. How can I rectify this? a, a:hover { text-decoration: none; } .soc ...

How can I alter the text color on hover within a Material UI card? My goal is to have the text color change when hovering over the card itself, rather than just the text

When I apply CSS to the card hover effect, it works fine. However, I also want to change the text color along with the card color on hover. card: { maxWidth: 350, height: 300, '&:hover': { backgroundColor: '#373737 !impor ...