ASP.NET buttons designed with a Facebook inspired style

Having trouble in ASP.NET trying to style buttons similar to Facebook Buttons, which can be found at:

I attempted to use asp:Button with a set CssClass, and it was effective most of the time. However, I encountered issues with buttons containing images, such as:

class="uibutton icon add"

Using: Button makes things look good, but unfortunately, I cannot establish a connection to the C# code without resorting to JavaScript.

I am hoping there is a simple solution that I might be overlooking (I have experimented with 'background' and 'background-image' in CSS with no success).

c#asp.netcssfacebookbutton

Answer №1

Since there is only one element, it should function properly. Have you considered sharing a JSBin for further troubleshooting?

Similar to Bootstrap, this issue exists and one workaround is utilizing a LinkButton as mentioned here.

Answer №2

Upon reviewing the provided link, it appears that the icons cannot be utilized with an <input> element, only with <button> or <a> elements. Luckily, using <asp:LinkButton> will function similarly to an <asp:Button> on the server side, while displaying as an <a> element on the client side.

Therefore, I recommend trying out 

<asp:LinkButton CssClass="uibutton icon add" ... >
for a successful outcome.

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

I am working on an aspx page that includes a master page and I need to dynamically update the content within the ContentPlaceHolder asynchronously

In my ASPX page with a master page, I am looking to asynchronously update the ContentPlaceHolder section. My initial thought was to use an update panel, where upon user submission, the update panel would refresh with the solution. Alternatively, I am consi ...

javascriptjqueryasp.netajax

What steps can be taken to ensure the WhatsApp icon is easily visible on a small screen?

I currently have a navigation bar with the left side dedicated to navigation items and the right side featuring a whatsapp icon. <mat-toolbar class="nav"> <a routerLink="app-aaa" mat-button>aaa</a> <a routerLi ...

htmlcssangularangular-material

Present the contents of directories and files stored on a remote desktop computer through a website interface

I've been working on creating a website that can display the folders and files from a remote computer. I've explored options like RDP and RDC, but they require a remote desktop application to access. Currently, I am using asp.net, C#, and JavaScr ...

c#asp.net

Performing a JavaScript action when a GridView row is selected, followed by running a database query upon confirmation

My gridview is set up to allow rows to be selected. <asp:CommandField ShowSelectButton="true" SelectImageUrl="~/Images/Icons/Cross.png" SelectText="Cancel"/> When a user selects a row, a MySQL query is triggered to delete it from the database. Ever ...

c#asp.netgridviewdom-events

A vertical line in Javascript extending upward from the base of an element

Is there a way to create a design where an infinite vertical line extends from the bottom of a circle (or in my case, a rectangle) without using css :after or pseudo-elements? I would like the line to be its own element and not limited by the restriction ...

javascripthtmlcss

What is the best way to perfectly center my CSS menu in a fluid style layout?

Can you assist me with this issue? I am trying to center my CSS menu precisely in the middle of the user's screen, both vertically and horizontally. Since users have varying screen resolutions, I need a fluid example to achieve this. Below is the HT ...

htmlcss

Within the ASP.NET Framework 4, it is necessary to enable the Listbox control to trigger an event when a user double

Currently, I am developing a project in ASP.NET 4. I have encountered a situation where the regular ListBox in version 4.5 includes an attribute named OnMouseDoubleClick. However, since I am using ASP.Net 4, I am looking for the best approach to replicat ...

javascriptasp.netlistboxasp.net-4.0

Locate the initial ancestor element that contains a specific child element on the first level

Looking to retrieve the primary parent element of a selected item that contains a checkbox as a direct child. HTML $('input[type="checkbox"]').change(function(e) { $(this) .parent() .parents("li:has(input[type='checkbox'] ...

javascripthtmljquerycss

Find the number of mandatory attributes of the Model that have been populated

Within my ASP.NET MVC project, I have established a model to store customer information in the database. After retrieving the data from the database in the controller, I am seeking a way to determine how many of the required fields have been filled out. ...

c#asp.netasp.net-mvcentity-frameworkreflection

Setting the default TAB in a specific Menu Tab within the Menu Bar

I'm encountering some issues with this code. Specifically, the menu bar JavaScript is automatically clicking on the Second TAB instead of the First TAB when run. JS CODE. var dolphintabs = { subcontainers: [], last_accessed_tab: null, ...

javascripthtmlcssdom-events

What causes an error in returning an entity with a one-to-many relationship in a web API?

Hey guys, I have a One to Many relationship with the same class called User. In my web API's GET method, I am returning just one instance of the user and it seems to be working fine as long as there are no issues. User ID | Name 0 | A 1 | B ...

c#jsonasp.net-mvc-4asp.net-web-api

Adding or Deleting Rows from Input Table

I'm in the process of creating a website that features an input table allowing users to easily add or remove rows at their discretion. The desired UI is shown below: https://i.sstatic.net/EFAlM.jpg Here is the HTML code I have developed so far: & ...

javascripthtmlcssbootstrap-4

Conceal and reveal text using JavaScript

I am attempting to create a function where text appears and disappears when clicking on the '+' sign, but I am facing difficulties in getting it to work. Additionally, when I apply this function to other sections, the original one stops working a ...

javascripthtmlcss

Issues with ASP.NET cookies persisting, values not resetting, and removal of cookies unsuccessful

I have a cookie named "g" that can either have the values "y" or "n." To set the cookie, I use the following code: Response.Cookies("g").Value = "y" Response.Cookies("g").Expires = DateTime.Now.AddHours(1) To change the value of the cookie, I do this: ...

asp.netcookies

What is the best way to compare a byte array with a string?

Is there a way to compare the initial bytes in byte[] with a string? If so, how can I achieve this? ...

c#stringarrays

The color of the button in HTML5 will remain constant and not shift

I have several buttons that function like radio buttons - only one can be selected at a time: <button id="btn-bronze" name="btn-bronze" type="button" class="blue-selected">Bronze</button> <button id="btn-silver" name="btn-silver" type="butt ...

javascriptjqueryhtmlcss

Display a Progress Circle in a WPF View to indicate loading of data

I need a way to display a Progress Circle whenever my UI is in the process of loading something. Initially, I attempted to set a boolean value in the shellView and toggle it between true and false depending on whether the UI was busy or not. IsBusy=true; ...

c#.netwpfcaliburn.micro

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

Is it possible to retrieve the dynamically active buttons and store them in an array using jQuery?

var activeButtons = $('.btnp').active.toArray(); for(var i=0; i<activeButtons.length; i++) { var buttonText = activeButtons[i].closest("div").find("p.full-title").text(); } Is it possible to collect the currently active buttons in an array ...

jqueryarraysbutton

Leveraging C# and iOS to retrieve a JSON address via an API

As I work on developing a new Air Quality API-based app, I am reminded of when I attempted to create a weather app using JSON. Here was the initial code I had in place: var webClient = new WebClient(); ... var text = e.Result; // storing downloaded text ...

c#iosjsonxamarin