All geek questions in one place

C # ASP.Net Fancy Buttons

I am developing a C # ASP.Net project. And I would like to do something very similar to what is shown on the following website .

However, this is a solution for the HTML tag <a>, and I'm looking for a solution for ASP.NET buttons.

What are my options?

+3
source share
3 answers

<asp:LinkButton />- a good choice. It is almost identical <asp:Button />, except that it creates a shape corresponding to the hyperlink that you can put in it any image you want.

, LinkButton ImageButton, ImageButton , . Linkbuttons Buttons , .

+8

, - :

<asp:Button ID="SearchButton" runat="server" CssClass="addButtonStyle" OnClick="SearchButton_Click"
            Text="Go&nbsp;" Width="60px" />

some style:
.addButtonStyle {
    border: 1px solid #e1ecfc;
    background-color: #B9D1F4;
    color: #003399;
    background-image: url(partgrad.gif);
    background-repeat: repeat-x;
}
+2

Try this example.

or view it here My link example

<!DOCTYPE html>
<html>
<head>
 <title>Hello World | Button Config</title>
</head>
<body>
<div>




 <h1>Working with Buttons</h1>
 <p>Small, large, or medium size buttons can have css properties that you can benefit from rather that using images. Please look at the examples below</p>

<textarea>
<asp:button runat="server" id="helloWorld" CssClass="button" text=" --- See examples --- " />
</textarea>


 <ol>
  <li>
   <input type="submit" class="button" value="This is a Long Button"/>
  </li>
  <li>
   <input type="submit" class="button" value="Search Now!"/>
  </li>
  <li>
   <input type="submit" class="button" value="Short"/>
  </li>
 </ol>

 <ol>
  <li>
   <input type="submit" class="button round" value="This is a Long Button"/>
  </li>
  <li>
   <input type="submit" class="button round" value="Search Now!"/>
  </li>
  <li>
   <input type="submit" class="button round" value="Short"/>
  </li>
 </ol>

 <p>
  In theory you always want the cleanest markup. So linkButtons on are NO GO! LinkButtons are Javascript based and can cause accessibility issues.
 </p>

 <h3>IE doesn't have my rounded corners?</h3>
 <p>
  Gotcha, lets do it without JS and lets use the images found from the link below. IE doesnt take advantage of some of the cooler CSS tricks we find in other browsers. - Shame on them! In the next example we simply wrap the asp:button with a span and then a b element.
 </p>

 <ol>
  <li>
  <span id="btn-wrap">
   <b>
    <input type="submit" class="rounded" value="This is a Long Button"/>
    </b>
   </span>  
  </li>
  <li>
  <span id="btn-wrap">
   <b>
    <input type="submit" class="rounded" value="Search Now!"/>
    </b>
   </span>
  </li>
  <li>
  <span id="btn-wrap">
   <b>
    <input type="submit" class="rounded" value="Short"/>
    </b>
   </span>
  </li>
 </ol>


<textarea>
<span id="btn-wrap">
<b>
 <asp:button runat="server" id="helloWorld" text=" --- See examples --- " />
</b>
</span>
</textarea>


 <h3>Wrapping it up</h3>

 <p>
  In this demo, you've seen a single background image used as a repeating object to give us a gradient effect similar to the one found here <a href="http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html">http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html</a>
 </p>


 <style>
  input[type="submit"], span, b {background:transparent none repeat scroll 0 0;border:0 none;display:inline-block;margin:0;padding:0;cursor:pointer;outline:none;} /* reset the button */
  input.button {background:url(http://gfx2.hotmail.com/cal/11.00/updatebeta/ltr/grid_navigator_bg.png) repeat-x; text-shadow:0 1px 1px #FFFFFF /* Just for looks */; padding:4px 5px;}
  input.button:active {background:#FED58F;}

  .round {-moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px;}

  /* http://gfx2.hotmail.com/cal/11.00/updatebeta/ltr/grid_navigator_bg.png thank you hotmail for the image */
  span#btn-wrap {background:transparent url(http://www.oscaralexander.com/tutorials/img/bg_button_span.gif) repeat-x scroll 0 0;}
  span#btn-wrap b {background:transparent url(http://www.oscaralexander.com/tutorials/img/bg_button_a.gif) no-repeat scroll right 0;height:18px;padding:3px 10px;}
  span#btn-wrap:active {background-position: 0 -24px;}
  span#btn-wrap:active b {background-position: right -24px;}

  li {margin:5px 0;}

  textarea {background:#323232; color:white; padding:10px; width:900px; height:80px; overflow:hidden;}
 </style>
</div>
</body>
</html>

Like the page, this is the cleanest java Script way to do this. It is accessible and browser accessible.

0
source

Source: https://habr.com/ru/post/1720195/

More articles:


All Articles