I'm trying to create a flexible CSS button, styled with only one image (or two, using the sliding door technique) but i want it to be flexible enough for multiple markup to have the same effect. For example:
Button
Would have the save effect as:
<input type="submit" value="Button" />
Any ideas or tuts laying around?
I don't think you can apply the sliding door technique to input elements. When I did it I used the button element:
<button type="submit"><span>Button</span></button>
You'd have to watch out with IE because it's a bit buggy (submitting the content of the button instead of it's value and when you have multiple submit buttons in a form submitting all buttons instead of the clicked one), but these cases are usually rare.
For a link I used:
<span>Link</span>
And the approximate CSS:
a.button,
button {
color: #ffffff;
background: transparent url(right.png) no-repeat top right;
font-weight: bold;
text-decoration: none;
text-align: center;
border: none;
padding: 0 8px 0 0;
margin: 1px 0;
height: 20px;
overflow: visible;
cursor: pointer;
}
a.button::-moz-focus-inner,
button::-moz-focus-inner {
border: none;
}
a.button:focus,
button:focus {
outline: 1px dotted buttontext;
}
a.button span,
button span {
background: transparent url(left.png) no-repeat top left;
padding: 2px 0 4px 8px;
display: block;
}
If you want to use sliding doors, you can just add an element around the <input/>, right?
There's no pure CSS solutions to making a link submit, the only things in HTML that can submit are input elements, so you're stuck using <input type="button" /> and <input type="image" />.
I would use the Jquery submit event
So..
$('#my_button').click(function() {
$(this).submit();
});
If you do not understand Jquery this will not make any sense.
Related
Well, I have two buttons (in Spanish) and these buttons are inside an 'a' (link tag) so that:
<div class="MB789">
<button class="B121">Ya soy miembro</button>
<button class="B122">Quiero unirme</button>
</div>
The purpose of the 'a' is obviously to redirect the user to the respective page and the buttons are for the style (yes, I want the user to see buttons and not links)
In the CSS I wrote the following:
.MB789{
display: table;
padding: 10px;
text-align: center;
}
.MB789 button{
border: none;
border: 1px solid black;
padding: 10px 20px;
margin: 10px;
cursor: pointer;
}
.MB789 a{
margin: 10px;
background: red; /*Debug: to visualize the elements 'a'*/
}
This is the result:
And that's the problem, that the 'a' elements stand out from the buttons.
And this is what happens when I tell the elements to show themselves as a table.
.MB789 a{
display: table;
background: red; /*Debug: to visualize the elements 'a'*/
}
Then this is what happens:
What I want is that 'a' elements do not protrude from the buttons, but that when the user click on a button, be redirected to the respective link.
Note: I know that Javascript can be redirected, but I refrain from doing this using that language because the user can disable Javascript from the browser settings.
Firstly, you cannot nest <button></button> elements inside an <a> tag, that is invalid markup. Please see why here: Can I nest a <button> element inside an <a> using HTML5?
Secondly you can style the <a> tag like a button and this will resolve your problem.
Your HTML markup needs to look like this:
<div class="MB789">
Ya soy miembro
Quiero unirme
</div>
Your CSS would look like this:
.MB789{
display: inline-block;
padding: 10px;
text-align: center;
}
.MB789 a{
display: inline-block;
border: 1px solid black;
padding: 10px 20px;
margin: 10px;
cursor: pointer;
}
You've put a 10px margin on the buttons, because they're inside of the a tags this margin will be between the buttons and the edge of the a tags, making them protrude out from the button. Try removing that margin:
.MB789 button{
border: none;
border: 1px solid black;
padding: 10px 20px;
cursor: pointer;
}
I'm trying to remove the pressed effect from button on IE9. In all other browsers I have no problems.
Please take a look to the code
HTML
<button class="fancy">howdy!</button>
CSS
.fancy {
width: 60px;
height: 30px;
position: relative;
top: 0px;
margin: 0;
padding: 0px;
display: block;
border: none;
padding: 0;
color: #FFF;
font-size: 11px;
background: green;
outline: none;
overflow: hidden;
line-height: 11px;
}
.fancy:active,.fancy:focus
{
padding:0px;
margin:0px;
border: none;
outline:none;
text-indent: 0;
line-height: 11px;
}
Working demo http://jsfiddle.net/MDfvE/
As you can see, when you click the button on IE9 you will see that the text is moved to the right and bottom. I want to remove that.
Any clue? Thank you!
IE only recognizes the :active pseudo class when the element is an anchor.
http://msdn.microsoft.com/en-us/library/cc848864%28v=VS.85%29.aspx
Try changing the button element to an anchor tag and adjust the styling to recreate the look you had for your button.
It's a browser behaviour, a simple solution is to use a link tag instead of button (if its triggering a javascript function).
<img src="myimg"/>
If you still want to use the <button>, I've found that there are some characteristics on each browser (in a simple debug):
Chrome adds outline and padding
Firefox adds a whole lot of stuff with the standart button border
IE messes with the inner text position
So to fix them, you have to manipulate the pseudo selectors for the button behaviour. And for IE, a good solution is to envolve your text on a element, and make it relative positioned. Like so:
<button type="button" class="button"><span>Buttom or Image</span></button>
<style>
button,
button:focus,
button:active{
border:1px solid black;
background:none;
outline:none;
padding:0;
}
button span{
position: relative;
}
</style>
Pen
I'm using <button> to make a post request in a form. I also styled a a.button exactly like the <button> (I need the a.button to make some JS stuff).
The button has some padding, a fixed height. When I do specify the width of the button / a they both look the same. But when I add width to the <button> it ignores the padding.
I'm having this problem in Chrome, Firefox and Opera, so I guess it's not a rendering fault. Also same issue with <input type="submit" />
Here is the basic CSS:
.button, button {
margin: 0;
display: inline-block;
border: 0;
text-decoration: none;
cursor: pointer;
color: black;
background: #ddd;
font: 12px Verdana;
padding: 40px; /* 40px, so you can see that it won't be rendered with width */
text-align: center;
}
The HTML:
Some text
<button>Some text</button>
<!-- Works fine till here -->
<br /><br />
Some text
<button style="width:200px">Some text</button>
Fiddle: http://jsfiddle.net/9dtnz/
Any suggestions why the browsers are ignoring the padding? (top and bottom when using height / left and right when using width).
Very weird, I've seen my Chrome has a box-sizing: border-box; rule for input elements, so padding is included in width...
So to avoid that just specify box-sizing: content-box; (some prefix can be necessary).
It looks fine to me, so it might be a style sheet conflict issue. Try using !important to override whatever it may be and that could solve your problem.
.button, button {
margin: 0;
display: inline-block;
border: 0;
text-decoration: none;
cursor: pointer;
color: black;
background: #ddd;
font: 12px Verdana;
padding: 40px!important; /* 40px, so you can see that it won't be rendered with width */
text-align: center;
}
Hope this helps.
Michael.
I want to use Rounded Corner Button in my asp.net application. Do we have anything in ASP.NET 3.5 which helps us to make a rounded corner button ?
Here is the control and css that I'm using. My button is square, but it is not the case. You can create the rounded image by youself.
<asp:LinkButton ID="lbtnSignIn" class="button" runat="server" OnClick="lbtnSignIn_Click"><span>Sign In</span></asp:LinkButton>
.button
{
background: transparent url('../../Images/ButtonLeft.gif') no-repeat top left;
display: block;
float: left;
line-height: 11px; /* 21px (Button Background) = 5px (padding-top) + 11px (font-size) + 5px(padding-bottom) */
height: 21px; /* Button Background Height */
padding-left: 9px;
text-decoration: none;
font-weight: bold;
color: white;
font-size: 11px;
}
a:link.button, a:visited.button, a:active.button
{
color: white;
text-decoration: none;
margin-right: 10px;
}
a.button:hover
{
background-position: bottom left;
}
a.button span, a.button span
{
background: transparent url('../../Images/ButtonRight.gif') no-repeat top right;
display: block;
padding: 5px 9px 5px 0; /*Set 9px below to match value of 'padding-left' value above*/
}
a.button:hover span
{
background-position: bottom right;
color: white;
}
You could use the ajax control toolkit which has a rounded corners extender. Personally I have never used it in a project. I use the css3 border-radius and just let the IE users live with the square borders until their browser catches up (http://www.cssportal.com/css3-rounded-corner)
Here is the link to the control extender sample.
http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/RoundedCorners/RoundedCorners.aspx
How about applying a CSS style to your button?
Sample code, demo, tutorial at Oscar Alexander
Using the code there, you can ensure all buttons get the style exactly as you want.
As p.cambell told you, the tecnique at this link works great: http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
But you've to substitute your "button" server control with an HyperLink server control , this because, the css is applied to the "a" tag.
So, in Visual Studio, instead draw a button, draw an HyperLink with CssClass="button"
Bye!
I have a webpage that is using third-party HTML that I cannot change. I can however edit the CSS style sheet. I have a "sliding-doors" style button that I want to swap for the default input button on the page, but I cannot figure how to do so using only CSS.
Here is the HTML of the button:
<div>
<input type="button" style="margin: 10px 0pt 0pt; width: 60px; height: 25px; font-size: 11px;" name="search_btn" value="Search" onclick="DoSearchSalesExpanded(searchform);"/>
</div>
And here is the CSS of an existing button that I have which uses the "sliding-doors" method:
.clear {
/* generic container (i.e. div) for floating buttons */
overflow: hidden;
width: 100%;
}
a.button_oval {
background: transparent url('http://mydomain.com/projects/buttons/sliding-doors/images/bg_button_oval_a.gif') no-repeat scroll top right;
color: #222;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 24px;
margin-right: 6px;
padding-right: 18px; /* sliding doors padding */
text-decoration: none;
}
a.button_oval span {
background: transparent url('http://mydomain.com/projects/buttons/sliding-doors/images/bg_button_oval_span.gif') no-repeat;
display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
}
a.button_oval:active {
background-position: bottom right;
color: #000;
outline: none; /* hide dotted outline in Firefox */
}
a.button_oval:active span {
background-position: bottom left;
padding: 6px 0 4px 18px; /* push text down 1px */
}
You need two elements to do nested background joining (aka sliding doors): an outer (background) one and an inner (foreground, containing the end-piece of the background image). If you only have a standalone <input> you're stuck.
If you can find a way to select the <div> you mentioned, you could use that as the outer element, with the button (with its natural background colour removed) as the inner. You would have to make sure the outer div was the same width/height as the inner <input>, though, perhaps by floating it left (to activate the ‘shrink-to-fit’ behaviour that comes with floats). You would also need to account for the top margin on the button, and any padding on it.
#something div {
float: left;
background: transparent url('http://mydomain.com/projects/buttons/sliding-doors/images/bg_button_oval_a.gif') no-repeat 0 10px;
}
#something div input {
background: transparent url('http://mydomain.com/projects/buttons/sliding-doors/images/bg_button_oval_span.gif') no-repeat;
border: none;
padding: 0;
}
However, as the button in question has a fixed-pixel on-page size, you don't really need to use nested backgrounds at all. You can just make one background of the right dimensons for the button.
If you are able to use the button element instead of the input element.
The following articles are quite useful.
http://jedisthlm.com/2008/03/27/flexible-css-buttons/
http://robertnyman.com/2008/03/13/styling-buttons-and-achieving-sliding-doors-with-them/
You can still use type submit and post like an input does
However, if you are relying on using this button as a submit, just beware that when using IE. it will submit the contents of the button also which will give a security exception for .net web apps.
*Edit, found a different link as original no longer works
Your only other option would be to use javascript to dynamically insert the ...my button text... tags typically used for sliding doors buttons. However this is not recommended as it will not work with JS disabled.