Multi
Multi
  • Pages:
  • 1
  • 2
Zetaboards: CSS-Only Buttons; A step closer to a completely imageless theme.
Topic Started: Friday, 17. August 2012, 11:49 (2,789 Views)
Lewis.
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
Off
Profile
Quote
Top
 
Replies:
Lewis.
Member Avatar
Awesomesauce.
Izaya Orihara
Saturday, 18. August 2012, 22:07
There gonna be a tutorial with this regarding the other buttons? (Report/Delete/Edit/etc). Found this very useful and interesting. :)
It would be the same principle.

Create a <div class="postbuttons">delete</div>

And add the styling to your CSS like you do with this: .postbutton{}

I'll have a look when I can get on my laptop to make sure there's no default zb stuff that throws them out of line.

Same idea though.

Posted Image

Posted Image
Off
Profile
Quote
Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Coding & Development · Next Topic »
  • Pages:
  • 1
  • 2

Welcome Guest [Log In] [Register]
Outline Live
Loading..
Loading..