Mysterious Appearance of Grey Borders on Buttons. Cause Unknown

Recently, I've noticed that all of my buttons are mysteriously getting a grey outline, and I can't seem to pinpoint the cause. It's not related to hover or active states; it just seems to be there all the time. I have already addressed the default on-click border added by browsers with a :focus value.

This issue is specific to Google Chrome for now. I haven't tested it in other browsers yet.

.button_default {
    display: inline-block;
    background: #1188f0;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2e8cff), color-stop(100%,#1188f0));
background: -moz-linear-gradient(center top, #2e8cff 0%, #1188f0 100%);
-webkit-box-shadow: 0px 5px 0px 0px #006391, 0px -1px 0px 0px #1c95ff inset;
-moz-box-shadow: 0px 5px 0px 0px #006391, 0px -1px 0px 0px #1c95ff inset;
box-shadow: 0px 5px 0px 0px #006391, 0px -1px 0px 0px #1c95ff inset;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-transition: background-color 0.2s linear;
-moz-transition: background-color 0.2s linear;
-o-transition: background-color 0.2s linear;
transition: background-color 0.2s linear;
text-shadow: 0px 1px 0px #006ac7;
padding: 5px 15px;
text-transform: uppercase;
text-align: center;
color: #ffffff;
font-weight: bold;
}
.button_default:hover {
    background: #1995fa;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2e8cff), color-stop(100%,#2e8cff));
background: -moz-linear-gradient(center top, #2e8cff 0%, #2e8cff 100%);
}
.button_default:active {
cursor: wait;
-webkit-box-shadow: 0px 2px 0px 0px #006391, 0px -1px 0px 0px #1491ff inset;
-moz-box-shadow: 0px 2px 0px 0px #006391, 0px -1px 0px 0px #1491ff inset;
box-shadow: 0px 2px 0px 0px #006391, 0px -1px 0px 0px #1491ff inset;
-webkit-transition: background-position 0.3s linear;
-moz-transition: background-position 0.3s linear;
-o-transition: background-position 0.3s linear;
transition: background-position 0.3s linear;
-webkit-transform: translateY(3px);
-moz-transform: translateY(3px);
transform: translateY(3px);
}
.button_default:focus {
  outline:0;
}
<form method="link" action="create/create.php">
  <input class="button_default" type="submit" value="CREATE NEW">
</form>

htmlcss

Answer №1

Get rid of the standard border on the buttons: border: none.

.button_default {
    display: inline-block;
    background: #1188f0;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2e8cff), color-stop(100%,#1188f0));
    background: -moz-linear-gradient(center top, #2e8cff 0%, #1188f0 100%);
    -webkit-box-shadow: 0px 5px 0px 0px #006391, 0px -1px 0px 0px #1c95ff inset;
    -moz-box-shadow: 0px 5px 0px 0px #006391, 0px -1px 0px 0px #1c95ff inset;
    box-shadow: 0px 5px 0px 0px #006391, 0px -1px 0px 0px #1c95ff inset;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-transition: background-color 0.2s linear;
    -moz-transition: background-color 0.2s linear;
    -o-transition: background-color 0.2s linear;
    transition: background-color 0.2s linear;
    text-shadow: 0px 1px 0px #006ac7;
    padding: 5px 15px;
    text-transform: uppercase;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
}
.button_default:hover {
    background: #1995fa;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2e8cff), color-stop(100%,#2e8cff));
    background: -moz-linear-gradient(center top, #2e8cff 0%, #2e8cff 100%);
}
.button_default:active {
cursor: wait;
    -webkit-box-shadow: 0px 2px 0px 0px #006391, 0px -1px 0px 0px #1491ff inset;
    -moz-box-shadow: 0px 2px 0px 0px #006391, 0px -1px 0px 0px #1491ff inset;
    box-shadow: 0px 2px 0px 0px #006391, 0px -1px 0px 0px #1491ff inset;
    -webkit-transition: background-position 0.3s linear;
    -moz-transition: background-position 0.3s linear;
    -o-transition: background-position 0.3s linear;
    transition: background-position 0.3s linear;
    -webkit-transform: translateY(3px);
    -moz-transform: translateY(3px);
    transform: translateY(3px);
}
.button_default:focus {
  outline:0;
}

input[type="submit"].button_default { border: none;}
<form method="link" action="create/create.php">
  <input class="button_default" type="submit" value="CREATE NEW">
</form>

Answer №2

To remove the default border on the button, simply add border: 0 to your CSS style

.button_custom {
    display: inline-block;
    background: #ffcc00;
    ...
    ...
    color: #333333;
    font-weight: normal;
    border: 0;
}

Answer №3

To get rid of the border, you can just delete it:

.button_default {
  border:none;
}

For more information on this topic, check out this previous discussion: Button border & background

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

Show the sticky dropdown only when an error occurs during submission

My goal is to have the dropdown selected only when an error occurs, and here is the script I am using <select name="usertype" id="usertype" class="form-control"> <option value="">Please select the user type</option> <option va ...

phphtmlpoststicky

Tips on customizing the appearance of React rendering components

<div> <h3>{this.props.product.name}</h3> <h3>{this.props.product.code}</h3> {this.renderColors()} <article> <div da ...

javascripthtmlcssreactjs

Incorporating CSS stylesheet into OpenCart pages depending on the designated route

Currently, I am working on a client's store using opencart (version 1.5.1.3.1) and I am trying to figure out the most efficient way to add specific stylesheets for certain routes. For instance, I would like to apply a different stylesheet to my categ ...

cssopencartstylesheet

Utilizing the .fadeOut('slow') method for CSS visibility manipulation

Here is a little JavaScript code snippet that I have: function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style. ...

javascriptjquerycss

A dynamic 2-column website design featuring a mobile-friendly layout and an adaptable image

After searching through numerous resources on the topic, I have yet to find a solution to this particular challenge. Is it feasible to create a webpage layout with a text column on the left and an image column on the right that will seamlessly transition i ...

cssresponsive-design

Setting up a Content Security Policy to allow fetching images from both remote URLs and local sources

My Content-Security-Policy meta configuration looks like this: <meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-eval' 'unsafe-inline'; img-src *; style- ...

htmlangularcontent-security-policy

Access your photographs from the national studio database by simply entering your unique job number to view and download them

Today is my first day diving into PHP, and I've been tasked with a project that has a deadline in just one week. While HTML and CSS are familiar to me, I'm feeling overwhelmed and unsure of how to start with PHP. I am part of a national photogra ...

phphtml

Utilize jQuery to trigger PHP validation script

HTML Code: I have implemented validation using jQuery. My next task is to call a PHP file from jQuery, perform validation in page2.php, and then submit the data to the database. After successful submission, I need to redirect to index.php. However, I am f ...

javascriptphpjqueryhtml

Replicating radio button functionality using buttons in an HTML document

I am attempting to simulate radio button behavior using normal buttons for a quiz application. Currently, my code is working as intended and permanently highlights buttons with the desired color. However, I want all other buttons in a question to be white, ...

javascripthtmlcss

Display a featherlightbox popup when the page loads

Well, here's the deal. I don't have any experience with wordpress php coding at all, but I can make basic adjustments using the wordpress admin. Now I've run into an issue. I tried to use the feather lightbox js, and below is a snippet of co ...

javascriptphpjqueryhtmlwordpress

An easy guide to scrape CSS styles using Scrapy

When it comes to web scraping, I am skilled in using both scrapy and selenium webdrivers. However, I have noticed that selenium webdriver tends to be quite slow. Despite this, I find it convenient for extracting CSS properties of a webelement, such as: we ...

cssseleniumselenium-webdriverweb-scrapingscrapy

Loading screen featuring an outlined blueprint of design elements

Can anyone identify the technology or language used to create the preloader screen on websites like the one shown in this link? The elements have a sweeping shine effect while loading. This style of preloader screen can be seen on popular websites such as ...

javascripthtmlcss

Ways to conceal components upon clicking a different element

Struggling to make this jQuery function properly. I have a form with all fields contained in a div.form-group. The subscribe button is identified by the id subscribe. I'm aiming to hide the form fields when clicked, but my JavaScript doesn't see ...

javascriptjquerycss

Displaying personalized text on image with CSS in DOMPDF

I am attempting to display custom text on an image using dompdf. <div class="image" style="font-size:25px"> <img alt="" src="image-url.jpg" /> <div class="name" style="margin-top: -575px; margin-right: 0; margin-bottom: 0; margin-left: ...

phpcsspdfpdf-generationdompdf

Tips for utilizing a PNG image as a cursor in Vue

I am attempting to implement an image as a cursor in my Vue app. I have tried the following code: <template> <v-app :style="{ cursor: 'url(' + require('@/assets/images/custom_cursor.png') + ')&apos ...

cssvue.jsurlcursorvuetify.js

Adding @if and @foreach inside a class through onclick function with jQuery: A step-by-step guide

How can I insert if and foreach statements within a class when the user chooses an item from the dropdown menu? The following tags should be included inside: @if($article->tags) @foreach($article->tags as $articletag) @if($articletag->tag == ...

javascriptjqueryhtmlangularjs

What is the process for activating the appropriate image when clicking on the accordion?

I currently have three accordions on the left side and three images on the right side, but this may grow in the future. My goal is to have the first accordion open and display the first image when the page loads. When the user clicks on the second accordio ...

javascripthtmljquerycss

Retrieve content inside an iframe within the parent container

Hey there! I've been working on adding several iframes to my webpage. Each iframe contains only one value, and I'm trying to retrieve that value from the parent page. Despite exploring various solutions on Stack Overflow, none of them seem to be ...

javascripthtmliframeinnertext

Guide to adjusting the camera rotation in Three.js

I successfully created a 3D cone using CSS3Renderer and TrackballControl. You can see it in action here: Now, I am looking to enhance the user experience by allowing them to input values to control the camera rotation instead of relying on TrackballContro ...

css3dthree.jsuser-input

Is there a way to make my DIVS update their content dynamically like buttons do, without manually adding an onclick function in the HTML code?

I am currently customizing a WordPress theme that lacks the option for onclick events on div elements. However, I can assign classes and IDs to them. In my design, I have four spans in a row, and when each span is clicked, I intend for the corresponding p ...

javascripthtmlcsswordpress