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

Leveraging Vue Data for Storing CSS Properties

I am currently utilizing the Quasar framework in conjunction with Vue for my application development. Below is a snippet of my code: <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"> Save </q-tooltip> <q-tooltip c ...

javascriptcssnode.jsvue.jsquasar-framework

Automatically switch to the designated tab depending on the URL

Is it possible to automatically activate a specific tab based on the URL structure if my tabs are configured in this way? I am looking for a solution where a link on www.example1.com/notabs.html will redirect to www.example2.com/tabs.html This particular ...

javascriptjqueryhtmlcss

Minimize page reloads by utilizing Webservices and Webmethods

Currently involved in an ERP project and looking for ways to eliminate postbacks on the page. I have opted to utilize web services or web methods to address these postback concerns, with one added benefit being the ability to access inner HTML contents of ...

asp.netajax

The IE condition is failing to work properly with .js and .css files

I've been trying to use this code to load the ie.css file specifically for IE browsers, but for some reason it's not working. I'm feeling a bit confused here - can anyone help me figure this out? <html> <head> <titl ...

htmlcssinternet-explorer

Using TypeScript with Angular UI Router for managing nested named views in the application

Hey there! I am new to typescript and have a bit of experience with Angular. Lately, I've been struggling to make a common angular-ui-router setup work with typescript. I have a nested named views structure that just doesn't seem to load correctl ...

angularjshtmltypescriptangular-ui-router

Establish the dimensions of the element to match the dimensions of a responsive image

Currently, I am working on implementing flippable images on my website. It is important to me that the "back" of these images matches the dimensions of the front image. The challenge I am facing is that I have applied the Bootstrap img-responsive class to ...

jqueryhtmlcssangularjstwitter-bootstrap-3

Develop an Innovative Data-Driven Application using AJAX Technology

After inputting an artist's name and clicking on the button, I expect to receive a visually appealing list of their songs. I am encountering the following issue: Whenever I hit the button, no results are being returned, and I am unsure of the reaso ...

javascriptjqueryhtmlajaxgetelementbyid

Adjust the width of an anchor tag

I have been experimenting with different solutions and unfortunately, I have not been successful in resolving the issue at hand. While working on a WordPress website, I encountered some challenges. Despite having some knowledge in this area, I am struggli ...

htmlcsswordpress

Checkbox input with alphabetical ordering

I am currently facing an issue with a form that has checkboxes, but the text is not in alphabetical order. While there are plenty of examples for lists, finding examples for checkboxes has been challenging. http://jsfiddle.net/fG9qm/ <form> < ...

javascriptjqueryhtml

Utilize one ajax response for three distinct sections/divisions

After making an ajax call, I am receiving a total of 27 results that I need to divide equally into three sections, with 9 results in each. The sections are displayed below: HTML: <div id="content"> <section> </section> <s ...

javascriptjqueryajaxhtml

Having trouble retrieving the content within an HTML tag using jQuery?

I'm facing some challenges when it comes to extracting the content of an html tag using the Chrome console. I've been trying different methods for about half an hour, but nothing seems to work. That's why I need some help :) The code I want ...

jqueryhtmlweb-scraping

Tips for utilizing divs and spans in HTML5

When it comes to web development, HTML markup is utilized for structuring content, while CSS is used for styling and presenting that content. In the past, HTML elements like <div> were often assigned semantic meaning through the use of IDs and class ...

htmlcss-tables

Creating a table from a PHP associative array

I've been attempting to organize an associative array in ascending order and then display it in an HTML table, but I've hit a roadblock with an error. I tried searching for solutions here on SO and followed the advice provided in some threads: P ...

phphtmlarrays

Updating the global CSS styles that were inherited from the node_modules folder in a Next.js project

I've been attempting to customize the CSS style for a rc-pagination component that was included in a CSS file I already imported in the root component _App. However, despite my efforts to override the styles in the index.css file of this component, no ...

cssreactjsnext.jsnode-modulesstyling

Challenges with implementing TailwindCSS classes in a Next.js application

I've encountered some issues in my nextJS app with utilizing certain TailwindCSS classes such as top, left, or drop-shadow. Even after attempting to update Tailwind from version 1.9.5 to 3.3.3, I have not seen any changes. I believe that I am import ...

javascriptcssreactjsnext.jstailwind-css

Is it possible to horizontally center an auto-fill grid using only CSS?

I would like to fill my page horizontally with as many blocks as possible and center the result. My goal is to have a grid that can resize when the window size changes: wide window xxx small window xx x Is it possible to achieve this without using Java ...

javascripthtmlcsscss-grid

Using Javascript to save basic high scores to a server

My JS game involves updating a score variable. When the game reaches a gameOver state, I want to compare the score to one saved on the server. If the player got a higher score, I'd like to overwrite the previous high score with the new one. If it&apos ...

javascriptphphtmlcssserver

What is the best way to save a current HTML element for later use?

Here is a simple HTML code that I would like to save the entire div with the class test_area and then replicate it when needed. Currently, my goal is to duplicate this div and place the clone underneath the original element. How can I achieve this? Unfortu ...

javascripthtmlcreateelement

Tips for enabling the auto complete feature in your settings

I have multiple websites similar to Facebook where users input an email address and by clicking a button, a list of email addresses is displayed. Could someone please explain how this functionality is created? Can it be accomplished using only HTML or are ...

htmlautocomplete

Show data from a Mysql table column in a dropdown menu

I am trying to show the values from a MySQL table field in a select box. I attempted the code below but it only displays the specified field values in the echo function and not in the select box. I'm unsure where I made a mistake. $con = mysql_conne ...

phphtmlmysql