Welcome Guest [Log In] [Register]


@OutlineZB
  • Twitter feed loading
[hide]
add reply
  • Pages:
  • 1
Zetaboards: CSS-Only Buttons; A step closer to a completely imageless theme.
Topic Started: Friday, 17. August 2012, 11:49 (456 Views)
Lewis. Friday, 17. August 2012, 11:49 Post #1
Member Avatar
Awesomesauce.
 This tutorial provides a detailed explanation of how to create CSS-only buttons that work within the Zetaboards environment, providing a step closer to a completely imageless theme. You can see a demo of what you're creating here. However, there are both pros and cons.

First, the pros:

  • Faster loading times - CSS loads virtually instantly, meaning you no longer have to wait for images.
  • You don't need graphical knowledge (or coding if you read this) to edit the buttons.
  • You only need to edit the CSS to change the buttons of all your buttons of a particular type.


The cons:

  • Internet explorer may not support some of the CSS used.



First, we need to write our markup. This is simple.

Code: HTML
 
<div class="topic_button"></div>


<div> is a HTML tag that specifies a new division. We use a class attribute to point to our CSS (which I'll talk about later). We choose class instead of id because we're going to use it more than once; this element will style all of your post buttons. "topic_button" is used to name our button's base; this is important because we then style this with CSS by referring to the name. Then we close the division with </div>.

The text you want to be displayed on the button needs to be written within the <div> tags. Like so:

Code: HTML
 
<div class="topic_button">New Topic</div>


The above markup should be pasted into the images section of the board. It should look exactly like this, not very impressive is it?


Now that we've got the markup done, we need to make it look great! For this, we turn to our CSS.

Of course, you'll need to be editing your theme's CSS, so you need to go to your 'Theme Appearance'.

Remember we named our button in the markup? It's called topic_button and it's a class attribute. Classes are written like so:

Code: CSS
 
.topic_button{

}


The curly brackets used ({) simply tell us where our styling is going for the named element (in this case, .topic_button).

Let's get to it. Firstly, we're going to tell our browser the background colour of the button. In this case, I've opted for a pretty vibrant blue (#1d98bf. You can pick whatever you like. The reason for doing this is that if a browser does not support the newer CSS we're going to use, the blue is displayed instead. That way, your buttons have always got a background, regardless of which browser is being used. You'll be making something that looks like this:

Code: CSS
 
.topic_button{
background:#1d98bf;
}


Next up, choose your font color. I chose white (#fff).

Code: CSS
 
.topic_button{
background:#1d98bf;
color:#fff;
}


If you view your button now, you'll see that the text isn't spaced from the background. Time to fix that. We'll use padding to give your button some height (you could also use padding to give width, though I haven't here). Padding, as used here, is given in two numbers; the first is the vertical padding, the second is the horizontal padding. So, if you're wanting to make your buttons expand when they've got a longer word inside, you can use a second number, and no width. For this tutorial, I chose to use width instead; this gives a fixed pixel width and means that all my buttons are the same width. Here's what you'll have now.

Code: CSS
 
.topic_button{
background:#1d98bf;
color:#fff;
width:100px;
padding:6px 0;
}


It's looking a little better... but the text is a little too big. Quick fix; font-size using a percentage less than 100% (so that it's smaller than whatever the default size is). This is an optional step; if the default size of your theme is suitable, you don't need this. Also, the text is still aligned left (default). Let's change that whilst we're here, using text-align. Here's what we've got now:

Code: CSS
 
.topic_button{
background:#1d98bf;
color:#fff;
width:100px;
padding:6px 0;
text-align:center;
font-size:90%;
}


Square corners are boring. Let's make them rounded! The border-radius attribute will sort this for us, here I've opted for 3px rounding, though you might like to play with other options (20px gives a nice semi-circle). It's also important to note that I've added -moz-border-radius for cross-browser compatibility (-moz specifies that Mozilla browsers - like Firefox - need to do this too).

Code: CSS
 
.topic_button{
background:#1d98bf;
color:#fff;
width:100px;
padding:6px 0;
text-align:center;
font-size:90%;
border-radius:3px;
-moz-border-radius:3px;
}


Borders are next. This is where we make the button look like it's 3D. First, we use border-style to tell the browsers we want a line as a border (as opposed to dashes, dots or other stuff). Then we use border-width to identify the sizes of the borders. There's four numbers because there are four sides of the button, in this order: top, right, bottom, left. As you can see, the bottom border is bigger than all the others; it is this that makes the button look 3D. Finally, the self-explanatory border-color.

Code: CSS
 
.topic_button{
background:#1d98bf;
color:#fff;
width:100px;
padding:6px 0;
text-align:center;
font-size:90%;
border-radius:3px;
-moz-border-radius:3px;
border-style:solid;
border-width:1px 1px 3px 1px;
border-color:#167796;
}


Next is the gradient for the button. Here, we add an additional 7 lines of code. I have noted the browser support at the end of each line within the code (in the comment tags - /*) so you can see which browsers you're catering for. It's definitely worth taking a second to study this if you want to make your buttons look good in as many browsers as you can [1]. You might be able to pick out colours within this code; they begin with a hash (#) and are followed by six numbers. Each line, for the specific browsers, has two colours. The first colour is the colour of the top of the button (#23b1de), and the next colour is the bottom (#1b8eb3). Browsers do the rest and generate the gradient for inbetween those two colours.

Code: CSS
 
.topic_button{
background:#1d98bf;
color:#fff;
width:100px;
padding:6px 0;
text-align:center;
font-size:90%;
border-radius:3px;
-moz-border-radius:3px;
border-style:solid;
border-width:1px 1px 3px 1px;
border-color:#167796;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#23b1de', endColorstr='#1b8eb3'); /* for IE 5.5-7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#23b1de', endColorstr='#1b8eb3'); /*for IE 8-9*/
background: -webkit-gradient(linear, left top, left bottom, from(#23b1de), to(#1b8eb3)); /* for webkit browsers */
background: webkit-linear-gradient (top, #23b1de, #1b8eb3); /* for Safari 5.1+ and Chrome 10+ */
background: -o-linear-gradient(top, #23b1de, #1b8eb3); /* for Opera 11+ */
background: -moz-linear-gradient(top, #23b1de, #1b8eb3); /* for firefox 3.6+ */
background:linear-gradient(to bottom, #23b1de, #1b8eb3);
}


Nearly there. Let's add a fancy highlight to the button. Trust me, it's worth it. Another three lines of code. By now, you'll be familiar with the -moz and -webkit prefix (for 'cross-browserbility'). Inset is used to tell browsers this is an inner shadow. The first number is the horizontal displacement, the second is the vertical. And finally, another colour.

Code: CSS
 
.topic_button{
background:#1d98bf;
color:#fff;
width:100px;
padding:6px 0;
text-align:center;
font-size:90%;
border-radius:3px;
-moz-border-radius:3px;
border-style:solid;
border-width:1px 1px 3px 1px;
border-color:#167796;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#23b1de', endColorstr='#1b8eb3'); /* for IE 5.5-7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#23b1de', endColorstr='#1b8eb3'); /*for IE 8-9*/
background: -webkit-gradient(linear, left top, left bottom, from(#23b1de), to(#1b8eb3)); /* for webkit browsers */
background: webkit-linear-gradient (top, #23b1de, #1b8eb3); /* for Safari 5.1+ and Chrome 10+ */
background: -o-linear-gradient(top, #23b1de, #1b8eb3); /* for Opera 11+ */
background: -moz-linear-gradient(top, #23b1de, #1b8eb3); /* for firefox 3.6+ */
background:linear-gradient(to bottom, #23b1de, #1b8eb3);
-moz-box-shadow: inset 0px 1px #46d0fc;
-webkit-box-shadow: inset 0px 1px #46d0fc;
box-shadow: inset 0px 1px #46d0fc;
}


Finally, your buttons are completed with a smart text-shadow to give your text that extra little boost. As with the inner shadow, the first number refers to horizontal placement and the second to vertical. The third number tells the browser how much blur the shadow should have. And then a colour for the shadow.

Code: CSS
 
.topic_button{
background:#1d98bf;
color:#fff;
width:100px;
padding:6px 0;
text-align:center;
font-size:90%;
border-radius:3px;
-moz-border-radius:3px;
border-style:solid;
border-width:1px 1px 3px 1px;
border-color:#167796;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#23b1de', endColorstr='#1b8eb3'); /* for IE 5.5-7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#23b1de', endColorstr='#1b8eb3'); /*for IE 8-9*/
background: -webkit-gradient(linear, left top, left bottom, from(#23b1de), to(#1b8eb3)); /* for webkit browsers */
background: webkit-linear-gradient (top, #23b1de, #1b8eb3); /* for Safari 5.1+ and Chrome 10+ */
background: -o-linear-gradient(top, #23b1de, #1b8eb3); /* for Opera 11+ */
background: -moz-linear-gradient(top, #23b1de, #1b8eb3); /* for firefox 3.6+ */
background:linear-gradient(to bottom, #23b1de, #1b8eb3);
-moz-box-shadow: inset 0px 1px #46d0fc;
-webkit-box-shadow: inset 0px 1px #46d0fc;
box-shadow: inset 0px 1px #46d0fc;
text-shadow:0 1px 0 #136681;
}


To stop that annoying corner problem in browsers (like this, where your colour 'leaks' from the rounded corners, simply add the following three lines of code[2]:

Code: CSS
 
.topic_button{
background:#1d98bf;
color:#fff;
width:100px;
padding:6px 0;
text-align:center;
font-size:90%;
border-radius:3px;
-moz-border-radius:3px;
border-style:solid;
border-width:1px 1px 3px 1px;
border-color:#167796;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#23b1de', endColorstr='#1b8eb3'); /* for IE 5.5-7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#23b1de', endColorstr='#1b8eb3'); /*for IE 8-9*/
background: -webkit-gradient(linear, left top, left bottom, from(#23b1de), to(#1b8eb3)); /* for webkit browsers */
background: webkit-linear-gradient (top, #23b1de, #1b8eb3); /* for Safari 5.1+ and Chrome 10+ */
background: -o-linear-gradient(top, #23b1de, #1b8eb3); /* for Opera 11+ */
background: -moz-linear-gradient(top, #23b1de, #1b8eb3); /* for firefox 3.6+ */
background:linear-gradient(to bottom, #23b1de, #1b8eb3);
-moz-box-shadow: inset 0px 1px #46d0fc;
-webkit-box-shadow: inset 0px 1px #46d0fc;
box-shadow: inset 0px 1px #46d0fc;
text-shadow:0 1px 0 #136681;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}


And there you have it. A fully imageless CSS button for use with your theme. But wait! There's a little bit you must edit within the theme for your buttons to display properly when added. Find .cat-buttons and remove the width so you have something that looks like this:

Posted Image



Want to make your buttons even better? Consider adding a .topic_button:hover (for when hovered) effect and a .topic_button:active (for when clicked) effect.


See the full code below:

Code: HTML
 
<div class="topic_button">New Topic</div>


Code: CSS
 

.topic_button{
background:#1d98bf;
color:#fff;

/*Sizing*/
width:100px;
padding:6px 0;

text-align:center;

font-size:90%;

border-style:solid;
border-width:1px 1px 3px 1px;
border-color:#167796;

/*Rounded Corners*/
border-radius:3px;
-moz-border-radius:3px;

/*Gradient*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#23b1de', endColorstr='#1b8eb3'); /* for IE 5.5-7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#23b1de', endColorstr='#1b8eb3'); /*for IE 8-9*/
background: -webkit-gradient(linear, left top, left bottom, from(#23b1de), to(#1b8eb3)); /* for webkit browsers */
background: webkit-linear-gradient (top, #23b1de, #1b8eb3); /* for Safari 5.1+ and Chrome 10+ */
background: -o-linear-gradient(top, #23b1de, #1b8eb3); /* for Opera 11+ */
background: -moz-linear-gradient(top, #23b1de, #1b8eb3); /* for firefox 3.6+ */
background:linear-gradient(to bottom, #23b1de, #1b8eb3);

/*Inner Shadow - Highlight*/
-moz-box-shadow: inset 0px 1px #46d0fc;
-webkit-box-shadow: inset 0px 1px #46d0fc;
box-shadow: inset 0px 1px #46d0fc;

/*Text Shadow*/
text-shadow:0 1px 0 #136681;

/*No More Leaky Corners*/
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}

.topic_button:hover{
/*Gradient*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#37c6f3', endColorstr='#1b8eb3'); /* for IE 5.5 - 7*/
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#37c6f3', endColorstr='#1b8eb3'); /*for IE 8-9*/
background: webkit-linear-gradient (top, #37c6f3, #1b8eb3); /* for Safari 5.1+ and Chrome 10+ */
background: -o-linear-gradient(top, #37c6f3, #1b8eb3); /* for Opera 11+ */
background: -webkit-gradient(linear, left top, left bottom, from(#37c6f3), to(#1b8eb3)); /* for webkit browsers */
background: -moz-linear-gradient(top, #37c6f3, #1b8eb3); /* for firefox 3.6+ */
background:linear-gradient(to bottom, #37c6f3, #1b8eb3);

/*Inner Shadow - Highlight*/
-moz-box-shadow: inset 0px 1px #5dd6fc;
-webkit-box-shadow: inset 0px 1px #5dd6fc;
box-shadow: inset 0px 1px #5dd6fc;
}

.topic_button:active{
padding:7px 0 6px 0;
border-width:1px 1px 2px 1px;
}​
[1] Thanks to Pando for providing extra info about this.
[2] Thanks to Flavius for pointing this out
Edited by Lewis., Saturday, 18. August 2012, 10:58.
♔

Posted Image

Posted Image

lew.im | Dribbble | Twitter | Facebook | Pinterest | Youtube
Offline Profile Quote Top
 
Aidan Friday, 17. August 2012, 11:58 Post #2
Member Avatar


 This tutorial may help for the gradient portion.
Vote Alphacide! (Update: Alphacide won! :) )
Offline Profile Quote Top
 
Lewis. Friday, 17. August 2012, 12:01 Post #3
Member Avatar
Awesomesauce.
Aidan
Friday, 17. August 2012, 11:58
This tutorial may help for the gradient portion.
Absolutely. Usually, I make whatever it is in Photoshop first and then grab the colours from there. But for others, ColorZilla is very useful indeed.
♔

Posted Image

Posted Image

lew.im | Dribbble | Twitter | Facebook | Pinterest | Youtube
Offline Profile Quote Top
 
Geoffrey Friday, 17. August 2012, 12:02 Post #4
Member Avatar
Golden Lunatic

 Great guide, you went through a lot of CSS functions that can be used for other things and not just the buttons (there are other tuts here that say how to do buttons with CSS ;) ).
Lewis.
Friday, 17. August 2012, 12:01
Aidan
Friday, 17. August 2012, 11:58
This tutorial may help for the gradient portion.
Absolutely. Usually, I make whatever it is in Photoshop first and then grab the colours from there. But for others, ColorZilla is very useful indeed.
Using Photoshop would require someone to have design knowledge, which you said at the beginning one didn't need for this. :P
Edited by Geoffrey, Friday, 17. August 2012, 12:03.
I will be away from Friday, May 24, through Sunday, May 26 (with no internet access).
I will also be away from Thursday, May 30, through Tuesday June 4 (though with some internet access).

geoffrey.outlineforum.com
Posted Image
Other Sigs
Awards & Memories
Offline Profile Quote Top
 
Lewis. Friday, 17. August 2012, 12:08 Post #5
Member Avatar
Awesomesauce.
Geoffrey
Friday, 17. August 2012, 12:02
Great guide, you went through a lot of CSS functions that can be used for other things and not just the buttons (there are other tuts here that say how to do buttons with CSS ;) ).
Lewis.
Friday, 17. August 2012, 12:01
Aidan
Friday, 17. August 2012, 11:58
This tutorial may help for the gradient portion.
Absolutely. Usually, I make whatever it is in Photoshop first and then grab the colours from there. But for others, ColorZilla is very useful indeed.
Using Photoshop would require someone to have design knowledge, which you said at the beginning one didn't need for this. :P


Lewis.
Friday, 17. August 2012, 12:01
Usually, I make whatever it is in Photoshop first and then grab the colours from there. But for others, ColorZilla is very useful indeed.


I have design knowledge. That's the way I do it. ColorZilla is a great resource for those that don't have access to an image editor, but even without it you still don't need design experience. I'm not saying "don't use ColourZilla"... use it. It's a great resource. I was merely stating what I do. B)

As for your praise, thank you. :)
♔

Posted Image

Posted Image

lew.im | Dribbble | Twitter | Facebook | Pinterest | Youtube
Offline Profile Quote Top
 
Geoffrey Friday, 17. August 2012, 12:13 Post #6
Member Avatar
Golden Lunatic
Lewis.
Friday, 17. August 2012, 12:08
Geoffrey
Friday, 17. August 2012, 12:02
Great guide, you went through a lot of CSS functions that can be used for other things and not just the buttons (there are other tuts here that say how to do buttons with CSS ;) ).
Lewis.
Friday, 17. August 2012, 12:01
Aidan
Friday, 17. August 2012, 11:58
This tutorial may help for the gradient portion.
Absolutely. Usually, I make whatever it is in Photoshop first and then grab the colours from there. But for others, ColorZilla is very useful indeed.
Using Photoshop would require someone to have design knowledge, which you said at the beginning one didn't need for this. :P


Lewis.
Friday, 17. August 2012, 12:01
Usually, I make whatever it is in Photoshop first and then grab the colours from there. But for others, ColorZilla is very useful indeed.


I have design knowledge. That's the way I do it. ColorZilla is a great resource for those that don't have access to an image editor, but even without it you still don't need design experience. I'm not saying "don't use ColourZilla"... use it. It's a great resource. I was merely stating what I do. B)

As for your praise, thank you. :)
Sorry for commenting, won't do it again. ^.^
I will be away from Friday, May 24, through Sunday, May 26 (with no internet access).
I will also be away from Thursday, May 30, through Tuesday June 4 (though with some internet access).

geoffrey.outlineforum.com
Posted Image
Other Sigs
Awards & Memories
Offline Profile Quote Top
 
Andrew Friday, 17. August 2012, 12:13 Post #7
Member Avatar
ぼくたちがすべてはばか。

 One thing I want to add to the hover is the cursor: pointer attribute so your mouse cursor will change on hover. At the moment on hover the mouse cursor stays the same.
Posted Image

Professional web design/development services. • http://wildandrewlee.com/
Offline Profile Quote Top
 
Lewis. Friday, 17. August 2012, 12:17 Post #8
Member Avatar
Awesomesauce.
Pro
Friday, 17. August 2012, 12:13
One thing I want to add to the hover is the cursor: pointer attribute so your mouse cursor will change on hover. At the moment on hover the mouse cursor stays the same.
That's only on the JSFiddle demo.

When the button is added to ZB, it's turned into a link and the hover state changes. :geek:

Added it to the JSFiddle demo anyway.
Edited by Lewis., Friday, 17. August 2012, 12:20.
♔

Posted Image

Posted Image

lew.im | Dribbble | Twitter | Facebook | Pinterest | Youtube
Offline Profile Quote Top
 
Andrew Friday, 17. August 2012, 17:41 Post #9
Member Avatar
ぼくたちがすべてはばか。
Lewis.
Friday, 17. August 2012, 12:17
Pro
Friday, 17. August 2012, 12:13
One thing I want to add to the hover is the cursor: pointer attribute so your mouse cursor will change on hover. At the moment on hover the mouse cursor stays the same.
That's only on the JSFiddle demo.

When the button is added to ZB, it's turned into a link and the hover state changes. :geek:

Added it to the JSFiddle demo anyway.
Even on ZB that's not the case. Take the buttons here for example. When you hover over something like the "Full Reply Screen" button the cursor does not change. Just being picky though :P
Edited by Andrew, Friday, 17. August 2012, 17:42.
Posted Image

Professional web design/development services. • http://wildandrewlee.com/
Offline Profile Quote Top
 
Geoffrey Friday, 17. August 2012, 17:43 Post #10
Member Avatar
Golden Lunatic
Pro
Friday, 17. August 2012, 17:41
Lewis.
Friday, 17. August 2012, 12:17
Pro
Friday, 17. August 2012, 12:13
One thing I want to add to the hover is the cursor: pointer attribute so your mouse cursor will change on hover. At the moment on hover the mouse cursor stays the same.
That's only on the JSFiddle demo.

When the button is added to ZB, it's turned into a link and the hover state changes. :geek:

Added it to the JSFiddle demo anyway.
Even on ZB that's not the case. Take the buttons here for example. When you hover over something like the "Full Reply Screen" button the cursor does not change. Just being picky though :P
The cursor changes for me on both fast reply buttons. ;)

BB code buttons too.
I will be away from Friday, May 24, through Sunday, May 26 (with no internet access).
I will also be away from Thursday, May 30, through Tuesday June 4 (though with some internet access).

geoffrey.outlineforum.com
Posted Image
Other Sigs
Awards & Memories
Offline Profile Quote Top
 
Aidan Friday, 17. August 2012, 17:43 Post #11
Member Avatar
Pro
Friday, 17. August 2012, 17:41
Lewis.
Friday, 17. August 2012, 12:17
Pro
Friday, 17. August 2012, 12:13
One thing I want to add to the hover is the cursor: pointer attribute so your mouse cursor will change on hover. At the moment on hover the mouse cursor stays the same.
That's only on the JSFiddle demo.

When the button is added to ZB, it's turned into a link and the hover state changes. :geek:

Added it to the JSFiddle demo anyway.
Even on ZB that's not the case. Take the buttons here for example. When you hover over something like the "Full Reply Screen" button the cursor does not change. Just being picky though :P
Uh.. both the big and small buttons are wrapped around links, so by default it is set to cursor:pointer;.
Vote Alphacide! (Update: Alphacide won! :) )
Offline Profile Quote Top
 
Lewis. Friday, 17. August 2012, 18:29 Post #12
Member Avatar
Awesomesauce.
 Just made an edit of 4 lines within the gradient section of the tutorial - better browser support now. :)
♔

Posted Image

Posted Image

lew.im | Dribbble | Twitter | Facebook | Pinterest | Youtube
Offline Profile Quote Top
 
Flavius Friday, 17. August 2012, 19:32 Post #13
Member Avatar
Super Member
 Add this snippet.

Code:
 

/* useful if you don't want a bg color from leaking outside the border: */
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
Find my portfolio online at dribbble.com/fm

http://graphic-force.com/index/
Offline Profile Quote Top
 
Ferus Grim Friday, 17. August 2012, 19:44 Post #14
Member Avatar
"Ego sum aeternam"

 Very useful tutorial, Lewis. :)
Posted Image

Posted Image
Offline Profile Quote Top
 
Lewis. Friday, 17. August 2012, 19:52 Post #15
Member Avatar
Awesomesauce.
Flavius
Friday, 17. August 2012, 19:32
Add this snippet.

Code:
 

/* useful if you don't want a bg color from leaking outside the border: */
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;


Thanks. Forgot all about that. Saw someone mention that before so I've added an image in there (in the description) to show what we're counter-acting. Thanks for bringing it up :)


Nicholas
Friday, 17. August 2012, 19:44
Very useful tutorial, Lewis. :)


Means a lot. Thanks :)
♔

Posted Image

Posted Image

lew.im | Dribbble | Twitter | Facebook | Pinterest | Youtube
Offline Profile Quote Top
 
Andrew Friday, 17. August 2012, 20:52 Post #16
Member Avatar
ぼくたちがすべてはばか。
Aidan
Friday, 17. August 2012, 17:43
Pro
Friday, 17. August 2012, 17:41
Lewis.
Friday, 17. August 2012, 12:17
Pro
Friday, 17. August 2012, 12:13
One thing I want to add to the hover is the cursor: pointer attribute so your mouse cursor will change on hover. At the moment on hover the mouse cursor stays the same.
That's only on the JSFiddle demo.

When the button is added to ZB, it's turned into a link and the hover state changes. :geek:

Added it to the JSFiddle demo anyway.
Even on ZB that's not the case. Take the buttons here for example. When you hover over something like the "Full Reply Screen" button the cursor does not change. Just being picky though :P
Uh.. both the big and small buttons are wrapped around links, so by default it is set to cursor:pointer;.
Not the button elements themselves. When you hover over things like bbcode buttons the cursor doesn't change.
Posted Image

Professional web design/development services. • http://wildandrewlee.com/
Offline Profile Quote Top
 
jon. Saturday, 18. August 2012, 10:38 Post #17
Member Avatar
trilluminati.

 Can we get a preview of your CSS button, Lewis?
Edited by jon., Saturday, 18. August 2012, 10:38.
Posted Image
Offline Profile Quote Top
 
Aidan Saturday, 18. August 2012, 10:50 Post #18
Member Avatar
jon.
Saturday, 18. August 2012, 10:38
Can we get a preview of your CSS button, Lewis?
I almost didn't notice, but he posted it at the very beginning: http://jsfiddle.net/LewisBell/AmMu2/5/
Vote Alphacide! (Update: Alphacide won! :) )
Offline Profile Quote Top
 
Lewis. Saturday, 18. August 2012, 10:59 Post #19
Member Avatar
Awesomesauce.
 Made that bit of the tutorial a little bigger so it's not missed :)
♔

Posted Image

Posted Image

lew.im | Dribbble | Twitter | Facebook | Pinterest | Youtube
Offline Profile Quote Top
 
Hatsune Miku Saturday, 18. August 2012, 22:07 Post #20
Member Avatar
Humans Are So Interesting
 There gonna be a tutorial with this regarding the other buttons? (Report/Delete/Edit/etc). Found this very useful and interesting. :)
Posted Image
YouTube Channels
TeamDeception09 | ThePokeeGamer
↑ Yu-Gi-Oh!! ↑ | ↑ Pokemon ↑
Offline Profile Quote Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
Go to Next Page
« Previous Topic · Coding & Development · Next Topic »
add reply
  • Pages:
  • 1


support outline's resources
donate via paypal!