Reputation: 1737
I need button which has more bling than a standard browser rendering, and because I am not a designer, I thought I'd use an existing solution. So, I went to a button maker I found on the Internet, and it made me a button which looks good. I copied the CSS, and my own button looks differently in my browser. On Inspect Element, the CSS is the same.
Their button looks like this:
And it has following rules applied:
My button looks uglier, because it gets a large border on all sides:
But when I look at the CSS, there is no difference to the applied rules. And while my element is an input
, I also have "real" buttons on my page, and they show the same behavior.
I tried running my page with or without a resetting CSS, but this made no difference. I always get the ugly look.
When I run their code in a fiddle, I get the same ugly result.
This happens in two different tabs of the same browser on the same machine, a Firefox 29.
Here again the problematic code:
button {
border-top: 1px solid #bfd1ed;
background: #5987d1;
background: -webkit-gradient(linear, left top, left bottom, from(#2662c3), to(#5987d1));
background: -webkit-linear-gradient(top, #2662c3, #5987d1);
background: -moz-linear-gradient(top, #2662c3, #5987d1);
background: -ms-linear-gradient(top, #2662c3, #5987d1);
background: -o-linear-gradient(top, #2662c3, #5987d1);
padding: 5px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #ffffff;
font-size: 14px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
}
button:hover {
border-top-color: #2662c3;
background: #2662c3;
color: #bdbdbd;
}
button:active {
border-top-color: #2662c3;
background: #2662c3;
}
body {
background-color: #555555;
}
Upvotes: 0
Views: 230
Reputation: 215
Thats because you use the wrong HTML tag
the css in your example is for an element with the class "button"
and if you look at the example in the button builder, you will see that they don't use:
<button name="My button"> A button! </button>
but they use a link tag and style it like a button:
<a class="button" name="My button" href="#">A button!</a>
so if you use the second version for the button, it will look like the example in the button builder
Upvotes: 1
Reputation: 382514
The difference is you're using a button
element.
Us a span
element and you'll get the same result.
You might also take the opposite approach and try to reset the button's style but in my opinion it's easier to style a span than to remove those styles.
Upvotes: 5