[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 298
  • Last Modified:

Button style

I have purchased this template
http://themeforest.net/item/slate-admin/full_screen_preview/133854 
and it uses
<div class=""><button type="submit" class="btn">Login</button></div>

However, I'm using asp.net and the button renders
<div class=""><input type="submit" name="btnLogin" value="Login" id="btnLogin" class="btn" /></div>

The buttons look totally different.
Why is this? How can I make it work with using input instead of submit?
0
JRockFL
Asked:
JRockFL
  • 4
  • 4
  • 2
2 Solutions
 
ChetOS82Commented:
What do you mean about it looking totally different?  Could you post a screenshot?
0
 
JRockFLAuthor Commented:
Yes, please see the screen shot
screenshot.jpg
0
 
ChetOS82Commented:
Did you simply put the <asp:Button /> inside the html <button /> tag?  You screenshot makes it look like it is nested.

You can completely remove the button tag in the html, just use your asp:Button with CssClass = "btn".
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
ChetOS82Commented:
You could also try:

<div class=""><button runat="server" name="btnLogin" id="btnLogin" class="btn">Login</button></div>
0
 
JRockFLAuthor Commented:
In the screen shot I just replaced "button" with "input"
Since the asp:button is rendered as "input" and not "button"

Is it possible to get it to display correctly using input?
0
 
ChetOS82Commented:
Input and button have different default styles.  In the css file, the .btn class has been styled in such a way as to get <button> to look right.  Your best option is to have asp.net send a button rather than input.
0
 
AmickCommented:
I cut and pasted the code from your original message into a blank file, added the button styles and got identical buttons for both pieces of code.


 Button Comparison
This suggests that your ASP CSS selector is not recognized in production.
0
 
JRockFLAuthor Commented:
Amick,

I'm not sure what you did. Can you explain more?
In my screen shot attached from above, I just modified the html to eliminate asp.net out of the equation.
0
 
JRockFLAuthor Commented:
I have added runat="server" to other elements in the past such as a div or h1 tag, but not to a button tag like this.

I was concerned about the click event, but it works.
There is a ServerClick event.

    Private Sub btnLogin_ServerClick(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnLogin.ServerClick

    End Sub

Thank you for your help
0
 
AmickCommented:
JRockFL,

You asked what I did to get the screenshot presented above.  I simply pasted your code into a blank html template and referenced the appropriate button styling.  The first time around, I think I only referenced screen.css.

Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Button Test</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">

<base href="http://madebyamp.com/themes/slate/">
	<link rel="stylesheet" href="./css/screen.css" type="text/css" media="screen" title="no title" charset="utf-8" />
</head>

<body>
I have purchased this template
http://themeforest.net/item/slate-admin/full_screen_preview/133854 
and it uses
<div class=""><button type="submit" class="btn">Login</button></div>

However, I'm using asp.net and the button renders
<div class=""><input type="submit" name="btnLogin" value="Login" id="btnLogin" class="btn" /></div>

The buttons look totally different.
Why is this? How can I make it work with using input instead of submit? 

</body>
</html>

Open in new window

0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

  • 4
  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now