Contrast between the structure of asp.net button and hyperlinks

I want to transfer the styles of a hyperlink in regular html to an Asp.net button.

However, I encountered a strange background issue that is disrupting the appearance of the buttons.

Hyperlink:

Asp.net Button

How can I remove the outline that appears on the Asp.net button?

This is the CSS code I am using:

.btn{
    background:url(../images/bg-btn.png) no-repeat;
    width:123px;
    height:45px;
    color:#80460f;
    font-size:13px;
    line-height:36px;
    text-transform:uppercase;
    text-align:center;
    display:block;
    margin:12px 0 0 -10px;
}
asp.nethtmlcssbuttonhyperlink

Answer №1

Have you experimented with using outline: 0 and border: 0 for the same purpose?

.btn {
    background: url(../images/bg-btn.png) no-repeat;
    width: 123px;
    height: 45px;
    color: #80460f;
    font-size: 13px;
    line-height: 36px;
    text-transform: uppercase;
    text-align: center;
    display: block;
    margin: 12px 0 0 -10px;
    outline: 0;
    border: 0;
}

Give it a try to see if it has any effect...

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

Combining MarkDown elements into a DIV or a custom HTML tag

I have utilized the Jeykll tool to convert mark down content into HTML. I am looking to group the following mark down elements within a div element or another custom HTML tag. Markdown #Multiple Axis {:.title} Different types of data can be vis ...

htmlmarkdownjekyll

Identifying the moment when the body scroll reaches the top or bottom of an element

I have been experimenting with javascript and jquery to determine when the window scroll reaches the top of a specific element. Although I have been trying different methods, I have yet to see any successful outcomes: fiddle: https://jsfiddle.net/jzhang17 ...

javascriptjqueryhtmlcss

Using jQuery to iterate through an array and reverse its order

Is there a way to loop through an array and change the CSS background color chronologically rather than randomly? Additionally, is it possible to reverse through the same array when the back button is clicked? http://jsfiddle.net/qK2Dk/ $('#right&a ...

javascriptjquerycss

Conceal the scrollbar track while displaying the scrollbar thumb

Hey there! I'm looking to customize my scroll bar to have a hidden track like this. Everyone's got their own style, right? ::-webkit-scrollbar{ width: 15px; height: 40px; } ::-webkit-scrollbar-thumb{ background-color: #DBDBDB; borde ...

htmlcssscrollbar

HTMLElement addition assignment failing due to whitespace issues

My current challenge involves adding letters to a HTMLElement one by one, but I'm noticing that whitespace disappears in the process. Here's an example: let s = "f o o b a r"; let e = document.createElement('span'); for (let i ...

javascripthtmltypescript

Add the variable's value to the input field

It is necessary for me to concatenate a numeric value, stored in a variable, with the input fields. For example: var number = 5; var text = $("#dropdown_id").val(); I wish to append the value of the variable 'number' to 'dropdown_id' ...

javascriptjqueryhtml

How to dynamically insert elements into the HTML page using Angular

When my page first loads, it looks like this <body> <div class="col-md-12" id="dataPanes"> <div class="row dataPane"> Chunk of html elements </div> </div> <div class"col-md-12 text-right"> <input type="butt ...

javascriptjqueryhtmlcssangularjs

jQuery Conditional String Manipulation

I have set up a system where users can input values and make selections from a drop-down menu, which then get integrated into JavaScript code to generate customized sentences based on their inputs. Once the user clicks submit, the sentence is formed. It&ap ...

jqueryhtmldrop-down-menujquery-chosen

Tips for making text flow around an image

How can I achieve a design where the text wraps around an image positioned in the bottom right corner? [Image Removed by Owner] Your guidance on implementing this effect is greatly appreciated. Thank you. ...

htmlcss

Parsing JSON data repeatedly using JavaScript within an HTML environment

The following code I found on a popular web development website works perfectly: <!DOCTYPE html> <html> <body> <h1>Customers</h1> <div id="id01"></div> <script> var xmlhttp = new XMLHttpRequest(); var url ...

javascripthtmljson

What is the best way to use PHP to call an ACF variable and substitute a nested HTML element?

Utilizing the repeater field in Wordpress' advanced custom fields, I have made the content on my site dynamic. View an image of the static markup here The following is how I structured the content using plain HTML: <div class="container" ...

phphtmlcsswordpressadvanced-custom-fields

File remains visible after deletion upon refreshing the page, but disappears after using the Ctrl + F5

After deleting a file on the server, I noticed that it still appeared when I refreshed the page. However, when I tried to do a hard refresh by pressing ctrl+F5, it resulted in a 404 error. This behavior is puzzling to me - shouldn't a simple refresh s ...

phphtml

Find the ID of the clicked table row using HTML and JavaScript

Currently, I am trying to implement this code snippet: <td align="center"> <div class="dropdown"> <button onclick="DropdownShow(this)" class="btn btn-default glyphicon glyphicon-picture"></button> <div id="@TableR ...

javascripthtml

JavaScript - Hover function not functioning properly

Having some difficulty with the .hover() function I am fetching dribbble shots that are displayed on page load. However, I am experiencing issues when trying to add a class via hover on these shots. Interestingly, the hover functionality works perfectly ...

jqueryhtml

Tips on centering text within child elements of a flexbox using the align property

.cnt { display: flex; } .one { background: #ff0000; width: 300px; } .two { background: #00ff00; flex: 1; } <div class="cnt"> <div class="one"> Center me </div> <div class="two"> And me </div> </d ...

htmlcssflexbox

What steps can be taken to prevent a wrapper's CSS from affecting its enclosed elements?

My container div includes some opacity and auto height that I don't want to affect all elements within it. Is there a way to preserve the container's styles without impacting its contents? ...

htmlcss

Ways to restrict input text to a specific set of values

When using an input text form, I need to ensure that users only insert values ranging from 1 to 10. However, my attempts to utilize a mask for customization have resulted in allowing values higher than 10. How can I restrict the input to only be allowed b ...

javascriptjqueryjsonhtmlcss

Add a new string to a class within a Vue.js component

Hey there, currently working on a Vue component where I am iterating through a list of countries. Here's how it looks: <div v-for="i in countries" :key="i.id"> {{i.name}} <span class="flag-icon-gr"></span> I want to dynamically ...

cssvue.jsnuxt.js

Ways to delete an image from a batch file uploading feature

I encountered an issue with my multiple image upload function that includes preview and remove options. When I select 4 images and preview them correctly, removing 2 from the preview still results in uploading all 4 images to the database. $(document).rea ...

phpjqueryajaxhtml

Ways to make ionic slides adhere to column width

I've been immersing myself in learning the latest versions of AngularJS and Ionic through practical application. I am currently working on a page that uses ionic rows and columns to display JSON data. The layout includes a 50/50 column setup, with a t ...

cssangularjsionic-framework