What is the process for adding a white shadow to a PNG button?

Whenever I compile my page, there is a button made of wood:

on page load button

Upon clicking this button, it displays some white shadow:

after click

Furthermore, when I click and press the button, it exhibits a gray shadow:

Is there a way to remove these shadows?

.btn-enter {
    background: url(../images/plank-36736_960_720.png) no-repeat center center;
    background-size:cover;
    position:absolute;
    top: 75%;
    left: 24%;
    width:55%;
    height: 20%;
    border:none;
    background-color:none;

}
.btn-enter:hover {
    background: url(../images/plank-36736_960_720.png) no-repeat center center;
    background-size:cover;
    position:absolute;
    top: 75%;
    left: 24%;
    width:55%;
    height: 20%;
    border:none;
    background-color:none;
}
.btn-enter:active {
    background: url(../images/plank-36736_960_720.png) no-repeat center center;
    background-size:cover;
    position:absolute;
    top: 75%;
    left: 24%;
    width:50%;
    height: 20%;
    border:none;
    background-color:none;
}
<button type="button" class="btn btn-default btn-enter"></button>

htmlcss

Answer №1

To remove the outline, you can use outline:0; 

.btn-enter {
    background: url('http://www.thisiscolossal.com/wp-content/uploads/2017/04/MatRandom_12.jpg') no-repeat center center;
    background-size:cover;
    position:absolute;
    top: 75%;
    left: 24%;
    width:55%;
    height: 20%;
    border:none;
    background-color:none;
   outline:0;
}
.btn-enter:hover {
    background: url(http://www.thisiscolossal.com/wp-content/uploads/2017/04/MatRandom_12.jpg) no-repeat center center;
    background-size:cover;
    position:absolute;
    top: 75%;
    left: 24%;
    width:55%;
    height: 20%;
    border:none;
    background-color:none;

}
.btn-enter:active {
    background: url(http://www.thisiscolossal.com/wp-content/uploads/2017/04/MatRandom_12.jpg) no-repeat center center;
    background-size:cover;
    position:absolute;
    top: 75%;
    left: 24%;
    width:50%;
    height: 20%;
    border:none;
    background-color:none;
}

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

Exploring the functionality of Virtual Studio Design view while developing asp.net applications with compelling CSS design

When I use an external CSS to style my controls, the layout appears disorganized in the Design View of VS2008. Every time I make a modification to my CSS, I am unable to preview it in design view. Instead, I have to run the web page and open my browser to ...

asp.netcssvisual-studio-2008view

unable to display a personalized error message within a Jinja2 template

I am currently developing a user registration feature in Flask, Python, and Jinja2. The function checks if a username or email is already in use and displays an error message below the respective text field. Here is the registration code: @app.route(&apo ...

pythonhtmlflaskjinja2

Automatically sorting data in JavaScript from PHP-generated JSON

When I receive JSON data from PHP and use it in JavaScript to populate a select box, the order is automatically sorted. This behavior should not occur. I am utilizing this JSON as the value for HTML select box options and I require the data to be in its o ...

javascriptphpjqueryhtmljson

To redirect to a webpage in PHP, incorporate nested if statements and override the meta HTML

I am looking for a way to automatically redirect to another webpage when a certain condition is met. Currently, I have set up a meta redirect in case the condition is not satisfied. <meta http-equiv="refresh" content="4; url=form3.html" /> <?ph ...

phphtmlhttp-redirect

What is the trick to shortening paragraphs with dots...?

There is a p tag, <p> most iconic character in cinema</p> I need to truncate the text after 8 characters, and display dots afterwards. For example: most ic... Is there a way to achieve this using CSS? Any help with AngularJS would also be ...

htmlcssangularjs

Unable to submit form using the submit button

Can anyone explain why the form won't submit in this scenario? I prefer not to use input type='Submit', but the function call seems to be working. <button onclick='submitForm()'>Save</button> function submitForm() { ...

jqueryhtml

Why won't my Java servlet code execute?

included the directory structure To facilitate adding two numbers and displaying the result upon clicking a submit button, I developed a straightforward Java servlet. This servlet retrieves the necessary information when called. The development environmen ...

javascriptjavajqueryhtmlajax

Trouble with saving the positioning after drag and drop

I am currently facing an issue with my drag-and-drop script where the coordinates of positioned relative divs are not being saved in the same position when I reload. These divs are contained within a container with specific height and width, restricting t ...

phpjavascriptjqueryhtmlcss

Utilize a component's CSS styles by inheriting them and applying them to another component

I have created custom styles for an object as shown below: form#sign_in{ position:relative; margin:85px auto 50px auto; width:455px; background:#fff; border:#dfdfdf 1px solid; border-radius:5px; -moz-border-radius:5px; -web ...

css

What is the best method to ensure that an image remains at the bottom of a div even as the div's height adjusts?

In my current project, I am facing a challenge with positioning an image in the bottom-right corner of a dynamically changing div. Initially, this is easily achieved by using CSS selectors: #div1 { position: relative; } #div1 img { position: abso ...

jquerycsspositioning

When working with ReactJs, you may encounter a delay in adding a class to the li element upon click event

I am facing an issue where the first li element works perfectly when clicked, but for the rest of the elements, I have to click twice to apply the desired styling. Can anyone explain why this behavior is occurring? App.js import React, { Component } from ...

javascripthtmlcssreactjsonclick

Is there a way to smoothly navigate back to the top of the page after the fragment identifier causes the page to scroll down?

I do not want to disable the functionality of the fragment identifier. My goal is for the page to automatically scroll back to the top after navigating to a specific section. This inquiry pertains to utilizing jQuery's UI tabs. It is crucial to have ...

javascriptjqueryhtml

Can the arrangement of icons/buttons on the JW Player control bar be customized?

I am trying to customize the skin of my JWplayer like this: This is my current progress: I have been researching how to rearrange the order of icon / button on the controlbar. According to the jwplayer documentation, the buttons on the controlbar are div ...

javascriptcssjwplayer

A webpage layout featuring an HTML table enhanced with JavaScript functionality

Hi there, I'm new to Javascript and looking for a way to simplify my code. Is there a way to use a loop to change the id values in HTML without manually editing them one by one? Here's what I have so far: <table border="2" cellpadding="4"> ...

javascripthtml

Issue with Closing Bootstrap 4 Modal on Hide Operation

I had successfully implemented this feature in bootstrap 3, but unfortunately, I have not been able to replicate the same in bootstrap 4 (beta). The modal for the sign-in form is structured as follows: <div class="modal fade" id="signInModal" tabindex ...

jqueryhtmltwitter-bootstrapbootstrap-modalbootstrap-4

html5sql - Struggling to establish a connection with my database

I recently started using html5sql.com for my html5 DB needs and I must say, it's a fantastic module! However, I've hit a roadblock. In my index.html/index.js file, I have set up my database and created tables in it. try { html5sql.open ...

javascriptjqueryhtmlsqliteweb-storage

What is the process for changing the color of my input fields to black and text to blue?

<form method="post" action="https://ip/form.php"> First name<br> <input type="text" name="fname" value=""><br> Email Address:<br> <input type="text" name="email" value=""><br> Phone: <br> <input type="text ...

htmlcss

Locating the top 3 largest values in an HTML data table and highlighting them in red

Issue Description: I am working with data that displays the electricity consumption of different buildings in HTML tables. There is a possibility that these tables may contain duplicate values. With the use of jQuery, I am seeking a method to identify an ...

javascriptjqueryhtmlarrays

Tips for aligning an image of varying dimensions in the center

Although I've done some research and attempted to splice together code from various sources, including here, here, and other places, I'm still struggling with centering an image on a webpage. The page in question features three layered .png imag ...

javascripthtmlcss

Script tag causing browser to send unwanted request

Recently, I received some code from a third-party supplier to implement on certain web pages. This code utilizes the jQuery plugin for jTemplates and looks something like this: <script type="text/html" id="item_template"> {#foreach $T.search.results ...

jqueryhtmljtemplates