CODEWITHSUNDEEP
asp.netcssbutton
Coder 2
Coder 2

Reputation: 4881

Button which looks like link

Hi I have a requirement where I'm not allowed to use javascript on the page. I had some asp:LinkButtons but these appeared to use javascript so I replaced them with buttons:

<asp:Button ID="titleButton" runat="server" BorderStyle="None" CommandArgument='<%# Eval("Id") %>' OnClick="downloadButtonClick" Text="Download" CssClass="ButtonAsLink" />

with css:

.ButtonAsLink
{
  background-color:transparent;
  border:none;
  color:blue;
  cursor:pointer;
  text-decoration:underline;
  font-weight:bold
}

This works as I was wanting but the Text of the button does not line up with the labels in the same column due to the margins between the edge of the button and the text.

I'm wondering if anyone can tell me how to set the button text margin to zero?

Upvotes: 5

Views: 7750

Answers (3)

a.stgeorge
a.stgeorge

Reputation: 304

.ButtonAsLink{
   background-color:transparent;
   border:none;
   color:blue;
   cursor:pointer;
   text-decoration:underline;
   font-weight:bold;
   padding: 0px;
 }

Set the element padding to 0px if you want to remove all padding or you can use the attribute like this.

padding: 0px 0px 0px 0px;

Of course you can have any positive numerical value in place of zero. the orientation of the padding in this attribute as it relates to the numerical valuesis:

padding: top right bottom left

Last note: Margin is the spacing around an element and other elements around it. Padding is the spacing of the area within an element (e.g. text within a )

Upvotes: 8

Cᴏʀʏ
Cᴏʀʏ

Reputation: 107508

Here, I put a little something together that might work for you. It's not perfect, but could be a starting point for you.

http://jsfiddle.net/Gj9R6/1/

Upvotes: 1

rcravens
rcravens

Reputation: 8390

What about setting the margins and padding in your style?

Upvotes: 2

Related Questions