HOME | DD

Description
/* ---- Goners / Importants ---- */ body div#devskin10611449 .gr { padding:0!important; } body div#devskin10611449 .gr-top img, body div#devskin10611449 .gr1, body div#devskin10611449 .gr2, body div#devskin10611449 .gr3, body div#devskin10611449 .tri, body div#devskin10611449 .prevlink, body div#devskin10611449 .lit img, body div#devskin10611449 .external:after, body div#devskin10611449 .user-symbol, body div#devskin10611449 .list img, body div#devskin10611449 .timestamp, body div#devskin10611449 .c { display:none; } /* ---- Universal Selector ---- */ body div#devskin10611449 * { background:transparent; border:none; margin:0; padding:0; } /* ---- user symbols ---- */ body div#devskin10611449 .banned.username:before { content:'!' !important; } body div#devskin10611449 .group.username:before { content:'#' !important; } body div#devskin10611449 .regular.username:before { content:'~' !important; } body div#devskin10611449 .hell.username:before { content:'*' !important; } body div#devskin10611449 .hell-beta.username:before { content:'=' !important; } body div#devskin10611449 .premium.username:before { content:'*' !important; } body div#devskin10611449 .beta.username:before { content:'=' !important; } body div#devskin10611449 .senior.username:before { content:'`' !important; } body div#devskin10611449 .volunteer.username:before { content:'^' !important; } body div#devskin10611449 .admin.username:before { content:'$' !important; } /* ----- List tweaking ----- */ body div#devskin10611449 ul, body div#devskin10611449 ol, body div#devskin10611449 ul ul, body div#devskin10611449 ol ol, body div#devskin10611449 ul ul ul, body div#devskin10611449 ol ol ol { margin-left:30px; } /* ---- hr ---- */ body div#devskin10611449 hr { border-bottom:1px dotted #bfbfbf; width:100%; } /* ---- fonts ---- */ body div#devskin10611449 .text h1, body div#devskin10611449 .text h2, body div#devskin10611449 .text h3, body div#devskin10611449 .text h4, body div#devskin10611449 .text h5, body div#devskin10611449 .text h6 { display:inline; color:#a11300; font-family:'Sintony', sans-serif; font-weight:600!important; } body div#devskin10611449 .text h1 { color:#2C3635 !important; } body div#devskin10611449 .text h1 a, body div#devskin10611449 .text h2 a, body div#devskin10611449 .text h3 a, body div#devskin10611449 .text h4 a, body div#devskin10611449 .text h5 a, body div#devskin10611449 .text h6 a { color:#2C3635; font-weight:400; text-decoration:none; } body div#devskin10611449 .text h1 a { color:#2C3635 !important; } body div#devskin10611449 .text h1 a:hover, body div#devskin10611449 .text h2 a:hover, body div#devskin10611449 .text h3 a:hover, body div#devskin10611449 .text h4 a:hover, body div#devskin10611449 .text h5 a:hover, body div#devskin10611449 .text h6 a:hover { color:#F96E5B; } body div#devskin10611449 .text h1 a:hover { color:#F96E5B !important; } body div#devskin10611449 .text h1 { font-size:18pt; } body div#devskin10611449 .text h2 { font-size:15.5pt; } body div#devskin10611449 .text h3 { font-size:13pt; } body div#devskin10611449 .text h4 { font-size:12pt; } body div#devskin10611449 .text h5 { font-size:9.5pt; } body div#devskin10611449 .text h6 { font-size:7.5pt; } /* ---- special text ---- */ body div#devskin10611449 .text .h3b { background:url('https://fc03.deviantart.net/fs71/f/2013/315/7/a/greylines_by_celvas-d6txqn6.gif') repeat; min-height:8px; width:100%; color:inherit; font-family:'Sintony', sans-serif; font-size:11pt; font-weight:600; text-align:center; } body div#devskin10611449 .text .h3bbg { background:#e8e8e8; padding:0 10px; } /* ---- font attributes ---- */ body div#devskin10611449 b { font-weight:600; } body div#devskin10611449 strong { background:#dadada; padding-left:2px; padding-right:2px; color:#272727; } /* ---- gr-box ---- */ body div#devskin10611449 .gr-box { background:url('https://fc06.deviantart.net/fs71/f/2013/315/e/e/journalskinbase_by_celvas-d6tvzn7.jpg') repeat; max-width:800px; margin:auto; } /* ---- negate box margin ---- */ body div#devskin10611449 .negate-box-margin { background:url('https://fc06.deviantart.net/fs71/f/2013/315/e/e/journalskinbase_by_celvas-d6tvzn7.jpg') repeat; border-top:1px solid #bfbfbf; border-bottom:1px solid #bfbfbf; } body div#devskin10611449 .negate-box-margin:before { opacity:0.3; filter:alpha(opacity=30); _zoom:1; position:absolute; top:80px; left:0; content:''; background:url('https://fc09.deviantart.net/fs71/f/2013/310/c/4/devid_by_celvas-d6t8qp7.jpg') no-repeat; width:290px; height:405px; } body div#devskin10611449 .negate-box-margin:after { position:absolute; top:75px; content:''; width:100%; border-bottom:1px solid #bfbfbf; } /* ---- gr-top h2 ---- */ body div#devskin10611449 .gr-top h2 { margin-top:15px; color:#000; font-family:'Sintony', sans-serif; font-size:22px; font-weight:300; } body div#devskin10611449 .gr-top h2 a { color:#000; } body div#devskin10611449 .gr-top h2 a:hover { color:#000; } /* ---- index ---- */ body div#devskin10611449 .index { position:absolute; top:0; left:20px; color:#000 !important; font-size:7.5pt; z-index:50; } body div#devskin10611449 .index a { color:rgb(0, 0, 0); color:rgba(0, 0, 0, 0.4) !important; font-weight:300 !important; text-decoration:none; } body div#devskin10611449 .index a:hover { color:#ed8744 !important; } /* ---- text ---- */ body div#devskin10611449 .text { padding-top:15px; color:#333; text-align:justify; } body div#devskin10611449 .text a { color:#b90504; font-weight:600; } body div#devskin10611449 .text a:hover { color:#ed8744; } /* ---- bs button ---- */ body div#devskin10611449 .bsbutton { background:#d3d3d3; background: -webkit-linear-gradient(top, #d3d3d3 0%, #bfbfbf 100%); background: -moz-linear-gradient(top, #d3d3d3 0%, #bfbfbf 100%); background:linear-gradient(to bottom, #d3d3d3 0%, #bfbfbf 100%); border:1px solid #b9b9b9; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; padding:2px; cursor:pointer; } body div#devskin10611449 .bsbutton:hover { background:#bfbfbf; background: -webkit-linear-gradient(top, #bfbfbf 0%, #d3d3d3 100%); background: -moz-linear-gradient(top, #bfbfbf 0%, #d3d3d3 100%); background:linear-gradient(to bottom, #bfbfbf 0%, #d3d3d3 100%); } body div#devskin10611449 .bsbutton:active { background:#bfbfbf; background: -webkit-linear-gradient(top, #bfbfbf 0%, #d3d3d3 100%); background: -moz-linear-gradient(top, #bfbfbf 0%, #d3d3d3 100%); background:linear-gradient(to bottom, #bfbfbf 0%, #d3d3d3 100%); border-top:1px solid #adadad; border-left:1px solid #adadad; border-right:1px solid #fff; border-bottom:1px solid #fff; box-shadow:inset 0 0 0 1px #bfbfbf; -moz-box-shadow:inset 0 0 0 1px #bfbfbf; -webkit-box-shadow:inset 0 0 0 1px #bfbfbf; } /* ---- TehBoxesCry ---- */ body div#devskin10611449 .ibox { width:50%; margin-left:100px; } body div#devskin10611449 .ibox2 { margin-left:100px; } body div#devskin10611449 .ibox a, body div#devskin10611449 .ibox a:hover { text-decoration:none; } /* ---- button for real ---- */ body div#devskin10611449 .button1c, body div#devskin10611449 .button1b, body div#devskin10611449 .button1a { position:relative; background:#ef9554; background: -webkit-linear-gradient(top, #ef9554 0%, #ec7a35 100%); background: -moz-linear-gradient(top, #ef9554 0%, #ec7a35 100%); background:linear-gradient(to bottom, #ef9554 0%, #ec7a35 100%); border-bottom:1px solid #ef9554; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding:10px 15px; color:#fff; font-size:13pt; cursor:pointer; box-shadow:inset 0 20px #f09a5f, inset 0 21px #f2a675, 0 5px #ca5b19, 0 7px 2px #999; -moz-box-shadow:inset 0 20px #f09a5f, inset 0 21px #f2a675, 0 5px #ca5b19, 0 7px 2px #999; -webkit-box-shadow:inset 0 20px #f09a5f, inset 0 21px #f2a675, 0 5px #ca5b19, 0 7px 2px #999; } body div#devskin10611449 .button1c:hover, body div#devskin10611449 .button1b:hover { top:3px; box-shadow:inset 0 20px #f09a5f, inset 0 21px #f2a675, 0 2px #ca5b19, 0 3px 2px #999; -moz-box-shadow:inset 0 20px #f09a5f, inset 0 21px #f2a675, 0 2px #ca5b19, 0 3px 2px #999; -webkit-box-shadow:inset 0 20px #f09a5f, inset 0 21px #f2a675, 0 2px #ca5b19, 0 3px 2px #999; } body div#devskin10611449 .button1c:active { top:5px; box-shadow:inset 0 0 0 1px #ca5b19, inset 0 20px #f09a5f, inset 0 21px #f2a675; -moz-box-shadow:inset 0 0 0 1px #ca5b19, inset 0 20px #f09a5f, inset 0 21px #f2a675; -webkit-box-shadow:inset 0 0 0 1px #ca5b19, inset 0 20px #f09a5f, inset 0 21px #f2a675; } /* ---- info box ---- */ body div#devskin10611449 .info { position:relative; display:inline; } body div#devskin10611449 .info img { position:relative; top:2px; left:3px; cursor:pointer; } body div#devskin10611449 .info span { position:absolute; display:none; bottom:20px; left:-100px; background:url('https://fc06.deviantart.net/fs71/f/2013/315/e/e/journalskinbase_by_celvas-d6tvzn7.jpg') repeat; min-width:200px; border:1px solid #bfbfbf; padding:10px 15px; text-align:center; box-shadow:1px 1px 2px #999; -moz-box-shadow:1px 1px 2px #999; -webkit-box-shadow:1px 1px 2px #999; } body div#devskin10611449 .info:hover span { display:block; } /* ---- bottom index ---- */ body div#devskin10611449 .bindex { position:relative; margin-bottom:5px; margin-left:30px; color:#000 !important; font-size:7.5pt; z-index:50; } body div#devskin10611449 .bindex a { color:rgb(0, 0, 0); color:rgba(0, 0, 0, 0.4) !important; font-weight:300 !important; text-decoration:none; } body div#devskin10611449 .bindex a:hover { color:#ed8744 !important; } /* ---- shbox ---- */ body div#devskin10611449 .shbox { background:rgb(0, 0, 0); background:rgba(0, 0, 0, .03); border:2px solid #cacaca; width:70%; padding:5px; margin:auto; text-align:center; }

Celvas > Gallery > Tutorials & References

Introduction

Buttons.

You all know buttons, because buttons are everywhere. We mostly take them for granted. They are there to direct us to somewhere else and God protect a button that doesn't do exactly that. We rarely give them a second thought, despite the fact that the appearance of a button is as much a design choice as any other element; a button can make or break a design.

Small advice: Simple (or rather: easy to navigate) is the new black. We established that buttons are part of that equation. It is my experience that buttons in journal designs aren't that highly sought after. People want them for their function, and even then rarely use them. Myself, I love to make buttons for one simple reason: It's a tonnage of fun.

What we'll be doing

The button base

Hover and active states

1. What we'll be doing

This CSS button.

Kidding. We'll make a spiff one. I'll elaborate. We will make a button that is pushable. Meaning it appears 3D without being 3D, and has a push animation without actually being animated. It's an effect that is easily acquired, all in all, and, in this case, requires three steps: The basic button, the one that doesn't do anything but look good; the hover button, the one slightly pushed down upon cursor contact; the active button, the one completely pushed down.

Ah, I guess I should tell you why you need to fake an animation. It's a CSS3 feature, and deviantART compels you to use (pretty much) none of those. You don't even have all pre-CSS3 stuff at your disposal, and I tell you right now: a lot of the rad stuff you see the coders here accomplish have gone through a process of How-do-I-make-it-look-as-if. Sometimes, we're all Wicked Witches of the West, and I'm waiting for someone to point out exactly how many times I've recommended people to join a coven.

Moving on.

We will strive not only for functionality and animation-fake, but also for a spiff look. Which is why this tutorial will also cover some basics about the box-shadow property and how to use it (with care, and reckless abandon). There's more: I'll explain every property used, not in the greatest detail, but ensuring that you'll get the picture and can get to work on actively pushing your own troops towards claiming Fort Button.

2. The button base

Whoever said all roads lead to Rome has never worked in coding. This is my way of saying that the button I'll make here is an example button I have decided upon after a little deliberation. Once you got the basics down you can create buttons as clown-crazy as you like, and you can use images, and you can use images and CSS, and if you weren't on deviantART, you could also script the living daylight out of 'em, but as it so happens, images and CSS it will have to be.

For my button base, you'll need seven colors in hex code format.

Button Base

Two of them will be a linear-gradient that makes for the main part of the button, the background. One color goes to border-bottom, and the remaining four colors are the box-shadows, with one of them being the shadow. Now, the shadow usually is a grey shade as dark or bright as the general background requires. While a shadow that is too light isn't earth-shattering, a shadow that is too dark does fall into that category; it's a question of balance. If you're not that sure about CSS Syntax yet, you might want to read it up here before moving on to the code.

span.button {
Button Base

This is the selector. The dot signifies it is a class selector. Adding span or div before the dot is NOT necessary, but it does help to keep your code in check; just give it enough time and you won't know what in your code is what. But again, it's not necessary, and concering dA journal skins the use is mostly obvious. All that is necessary is a dot and a unique, but easily recognizable selector designation.

position: relative;
Button Base

The first declaration in this rule. There are several position values, but relative works best in this case. It means that the element - the button - retains its position but can be moved. For example, if you were to add the declaration top: 20px; to the rule, the element would deviate from its normal position by 20px, downwards. We will need the possibility of moving the button a few pixels down in the case of the hover and active state of the button.

background: linear-gradient(to bottom, #ef9554 0%, #ec7a35 100%);

The background property defines the background of an element. It can be a solid color, it can be an image, it can be a linear gradient, like in this case. to bottom defines that the first color hex will be put at the top of the element, and the final color hex at the bottom. The hex codes and percentages inside the brackets work pretty much the same way the gradient tool in Photoshop or Illustrator or GIMP work: The hex defines the color, the percentage the color stop. Here, #ef9554 is set to the position of 0%, and the darker shade is #ec7a35 at 100%. You can put more color stops inbetween. However, keep browser support in mind.

border-bottom: 1px solid #ef9554 ;

Per CSS, you can define a border for your element. Just using the property border will give you an all-around border, while defining the border in question limits the effect to that exact border. For those who haven't mastered the English language yet, border-bottom means that only the lower border is effected, while the upper, the left, and the right remain as is. The pixel value defines the thickness of the border, the second the type of border (there's also dotted, dashed, double, and some more), and the third the color of the border. The way I used it, it is a shorthand property! It is composed of border-width (1px), border-style (solid), and border-color (#ef9554 ).

border-radius: 5px;

border-radius defines the roundness of the borders of an element, which only makes sense when it is relevant (if you can't see it, you don't need it). Here, all four borders are rounded by the same amount in pixels. It's also possible to apply a value to each border individually. These properties go by the rule: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius. This is also the order of the shorthand (border-radius: 5px 3px 0px 10px; ). You can also not define a border in the shorthand, so it will use the same value as another border in the short. My shorthand border-radius example says that bottom-right is specified as 0 (zero); if I were to leave it out, the border-bottom-right-radius would be the same as the border-top-left-radius.

padding: 10px 15px;

Padding describes the distance between an element's content and the element's outer border. To clarify: padding is the distance INSIDE of an element. No negative values are possible. Margin is the one that defines the distance between elements outside of the element containing the margin value, where negative values are possible. Do not mix up. You could say I used a short-shorthand in this case. I wanted the padding top and bottom be the same, as well as the padding for right and left. 10px defines both top and bottom, 15px defines both right and left. There is a shorter variant (use only one value for a uniform distance) and a longer variant (use four values for each distance).

color: #fff ;

The color of the font you use for this button. This has no effect on any other text color outside this element. You might be inclined to say, "Well, it is intended to be a hex code, but I know for a fact that a hex has six digits." Yeah. If your hex code looks like #ffffff , you can write #fff and it will be translated correctly as the color white. The first two digits signify the strength of red, the second pair green, the third pair blue (hence RGB). When either of these pairs is the same, you can shorten them into one. BUT it's an all-or-nothing type of shortening. While #ee66bb can be #e6b , #ee66ba cannot be #e6ba .

font-size: 13pt;

The size of the font, obviously. You do not need to use pt, as I have. There are other CSS units you can use, and I want to shed light on one especially: em. 1em is the font-size in use. If you now used 2em to define the font-size of a specific element, it would double. This is very useful in that the font-size isn't set in stone and adapts itself to the basic font-size/font the reader uses. Say that's 13pt. Then 2em would be 26pt. 11pt, 2em would be 22pt. Point being: em is more flexible than most other CSS font units.

cursor: pointer;

Defines the cursor style on hovering your mouse over the button. Pointer is the value used for the hand graphic that usually indicates a link or the like. The standard cursor is auto. You can also implement custom cursors, but a) Internet Explorer is being a bitch about it, and b) describing the go-about of it would go well beyond the tutorial discussion. When defining a cursor, make sure you use those that are supported by every major browser.

box-shadow: inset 0 20px #f09a5f , inset 0 21px #f2a675 , 0 5px #ca5b19 , 0 7px 2px #999;}

This is where most of the magic happens. Let me just say that box-shadow is one awesome feature you can do real cool styling stuff with. A lot of people are of the believe that you can only use one shadow and that this shadow is an outset shadow, probably black; you know, your usual shadow. Well, you see the difference between all the code written so far and adding box-shadow. You can stack several box-shadows, and they don't necessarily have to be outset, which is the standard. In the first line, you can see that I have defined the first box-shadow stack as inset, which means the shadow is directed inward, and is actually being used by me for the highlighting. The second inset is one layer below the first and only covers one pixel a tad lighter for extra detail. After that comes what is responsible for most of the 3D appearance: the "side" of the button, with a darker color. The shadow stacked lowest is the shadow our button throws.

box-shadow: x-axis-value | y-axis-value | blur amount | spread amount | color;
You don't need to use all of these, as I've shown in the above example. But if you want to set the blur amount, you will have to write down x and y as zero (or any value you wish). X and y are mandatory, blur amount and spread are optional. If you want to go all the way through to spread without using x, y, or blur amount, you'll still have to code those in as being zero, or break the shorthand down.

The base is the heaviest part. The rest is adjusting what you already have, taking some things away and adding a few, mainly editing the box-shadow to fit the new looks of the hover and active states, and moving the button base a few pixels.

3. Hover and active states

This is a question of getting from a, the base, to b, the hover state, to c, the active state. To illustrate the point:

We'll be starting with the hover state of the button. As I said, this is, code-wise, relatively easy. It is more of a design and color question than anything, and understanding what needs to be done in order to achieve the partial push effect for the hover.

span.button:hover {
Whenever you see a colon used in a way similar to this, you are dealing with a pseudo-element. A pseudo-element is called such because it is not an element on itself. It is attached to an already existing element. All code applied to the button base applies to the hover state also. So all we need to do is put new stuff here, or override code lines.

top: 3px;
Since the button is positioned relative, we can move it down 3px for the push effect. Of course it's up to you by how much you move the button, and depends on your button, but keep the box-shadow in mind. It will need to be overriden to help the push-look along, or else the box-shadow will simply be moved down.

box-shadow: inset 0 20px #f09a5f , inset 0 21px #f2a675 , 0 2px #ca5b19 , 0 3px 2px #999;}
As you can see, the first two layers, the highlights, are left untoched. However, I decreased the "side", the third layers, by the amount I have moved the button down: 3px. Since the button is now closer to the background, the shadow needs to be adjusted to be thinner. I chose to decrease the y-axis value by 5px, but keep the blur amount.

Hover over me!

The next and final step is the active state. This is the state you'll get to see when you click on the button.

span.button:active {
Another pseudo-element. With this one, you control how, usually a link, but in essence everything you want to, reacts when a user clicks it. Here, too, we'll only change the placement as well as the box-shadow to give a neat pushed look.

top: 5px;
If you want to read about top, look up what I wrote in the hover state description. It's all the information you need in this case.

box-shadow: inset 0 0 0 1px #ca5b19 , inset 0 20px #f09a5f , inset 0 21px #f2a675 ;}
You'll see that there have been some changes to the order of the box-shadows, and that there are three, not four. Since the button is pushed inside, there is no more need for an outer shadow or what our eyes perceived as being a side of the button. The first value is a 1px spread without any blur to achieve a darker, inner border. It had to be put before the highlights, because they are inset, too, and would have hidden the upper part of the border. Don't forget the rule: top to bottom. First equals first layer, second equals one layer below the first layer, and so on.

Click me!

And that, ladies and gentlemen, is a perfectly pushable button. Enjoy the clicking orgy. I sure do.

Let's code!: Background Properties | CSS Progress Bar | The Perils of !important | Pushable Buttons | More...
Quick Info Fix: CSS Syntax | CSS: Thoughts on Shorthand | CSS: Element Positioning | CSS: On Nesting
Journal Skins: Raspberry Smooth | Cream and Black | That Girl With The Flower | Dragon Age: Grey Wardens

Description
/* ---- Goners / Importants ---- */ body div#devskin10611449 .gr { padding:0!important; } body div#devskin10611449 .gr-top img, body div#devskin10611449 .gr1, body div#devskin10611449 .gr2, body div#devskin10611449 .gr3, body div#devskin10611449 .tri, body div#devskin10611449 .prevlink, body div#devskin10611449 .lit img, body div#devskin10611449 .external:after, body div#devskin10611449 .user-symbol, body div#devskin10611449 .list img, body div#devskin10611449 .timestamp, body div#devskin10611449 .c { display:none; } /* ---- Universal Selector ---- */ body div#devskin10611449 * { background:transparent; border:none; margin:0; padding:0; } /* ---- user symbols ---- */ body div#devskin10611449 .banned.username:before { content:'!' !important; } body div#devskin10611449 .group.username:before { content:'#' !important; } body div#devskin10611449 .regular.username:before { content:'~' !important; } body div#devskin10611449 .hell.username:before { content:'*' !important; } body div#devskin10611449 .hell-beta.username:before { content:'=' !important; } body div#devskin10611449 .premium.username:before { content:'*' !important; } body div#devskin10611449 .beta.username:before { content:'=' !important; } body div#devskin10611449 .senior.username:before { content:'`' !important; } body div#devskin10611449 .volunteer.username:before { content:'^' !important; } body div#devskin10611449 .admin.username:before { content:'$' !important; } /* ----- List tweaking ----- */ body div#devskin10611449 ul, body div#devskin10611449 ol, body div#devskin10611449 ul ul, body div#devskin10611449 ol ol, body div#devskin10611449 ul ul ul, body div#devskin10611449 ol ol ol { margin-left:30px; } /* ---- hr ---- */ body div#devskin10611449 hr { border-bottom:1px dotted #bfbfbf; width:100%; } /* ---- fonts ---- */ body div#devskin10611449 .text h1, body div#devskin10611449 .text h2, body div#devskin10611449 .text h3, body div#devskin10611449 .text h4, body div#devskin10611449 .text h5, body div#devskin10611449 .text h6 { display:inline; color:#a11300; font-family:'Sintony', sans-serif; font-weight:600!important; } body div#devskin10611449 .text h1 { color:#2C3635 !important; } body div#devskin10611449 .text h1 a, body div#devskin10611449 .text h2 a, body div#devskin10611449 .text h3 a, body div#devskin10611449 .text h4 a, body div#devskin10611449 .text h5 a, body div#devskin10611449 .text h6 a { color:#2C3635; font-weight:400; text-decoration:none; } body div#devskin10611449 .text h1 a { color:#2C3635 !important; } body div#devskin10611449 .text h1 a:hover, body div#devskin10611449 .text h2 a:hover, body div#devskin10611449 .text h3 a:hover, body div#devskin10611449 .text h4 a:hover, body div#devskin10611449 .text h5 a:hover, body div#devskin10611449 .text h6 a:hover { color:#F96E5B; } body div#devskin10611449 .text h1 a:hover { color:#F96E5B !important; } body div#devskin10611449 .text h1 { font-size:18pt; } body div#devskin10611449 .text h2 { font-size:15.5pt; } body div#devskin10611449 .text h3 { font-size:13pt; } body div#devskin10611449 .text h4 { font-size:12pt; } body div#devskin10611449 .text h5 { font-size:9.5pt; } body div#devskin10611449 .text h6 { font-size:7.5pt; } /* ---- special text ---- */ body div#devskin10611449 .text .h3b { background:url('https://fc03.deviantart.net/fs71/f/2013/315/7/a/greylines_by_celvas-d6txqn6.gif') repeat; min-height:8px; width:100%; color:inherit; font-family:'Sintony', sans-serif; font-size:11pt; font-weight:600; text-align:center; } body div#devskin10611449 .text .h3bbg { background:#e8e8e8; padding:0 10px; } /* ---- font attributes ---- */ body div#devskin10611449 b { font-weight:600; } body div#devskin10611449 strong { background:#dadada; padding-left:2px; padding-right:2px; color:#272727; } /* ---- gr-box ---- */ body div#devskin10611449 .gr-box { background:url('https://fc06.deviantart.net/fs71/f/2013/315/e/e/journalskinbase_by_celvas-d6tvzn7.jpg') repeat; max-width:800px; margin:auto; } /* ---- negate box margin ---- */ body div#devskin10611449 .negate-box-margin { background:url('https://fc06.deviantart.net/fs71/f/2013/315/e/e/journalskinbase_by_celvas-d6tvzn7.jpg') repeat; border-top:1px solid #bfbfbf; border-bottom:1px solid #bfbfbf; } body div#devskin10611449 .negate-box-margin:before { opacity:0.3; filter:alpha(opacity=30); _zoom:1; position:absolute; top:80px; left:0; content:''; background:url('https://fc09.deviantart.net/fs71/f/2013/310/c/4/devid_by_celvas-d6t8qp7.jpg') no-repeat; width:290px; height:405px; } body div#devskin10611449 .negate-box-margin:after { position:absolute; top:75px; content:''; width:100%; border-bottom:1px solid #bfbfbf; } /* ---- gr-top h2 ---- */ body div#devskin10611449 .gr-top h2 { margin-top:15px; color:#000; font-family:'Sintony', sans-serif; font-size:22px; font-weight:300; } body div#devskin10611449 .gr-top h2 a { color:#000; } body div#devskin10611449 .gr-top h2 a:hover { color:#000; } /* ---- index ---- */ body div#devskin10611449 .index { position:absolute; top:0; left:20px; color:#000 !important; font-size:7.5pt; z-index:50; } body div#devskin10611449 .index a { color:rgb(0, 0, 0); color:rgba(0, 0, 0, 0.4) !important; font-weight:300 !important; text-decoration:none; } body div#devskin10611449 .index a:hover { color:#ed8744 !important; } /* ---- text ---- */ body div#devskin10611449 .text { padding-top:15px; color:#333; text-align:justify; } body div#devskin10611449 .text a { color:#b90504; font-weight:600; } body div#devskin10611449 .text a:hover { color:#ed8744; } /* ---- bs button ---- */ body div#devskin10611449 .bsbutton { background:#d3d3d3; background: -webkit-linear-gradient(top, #d3d3d3 0%, #bfbfbf 100%); background: -moz-linear-gradient(top, #d3d3d3 0%, #bfbfbf 100%); background:linear-gradient(to bottom, #d3d3d3 0%, #bfbfbf 100%); border:1px solid #b9b9b9; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; padding:2px; cursor:pointer; } body div#devskin10611449 .bsbutton:hover { background:#bfbfbf; background: -webkit-linear-gradient(top, #bfbfbf 0%, #d3d3d3 100%); background: -moz-linear-gradient(top, #bfbfbf 0%, #d3d3d3 100%); background:linear-gradient(to bottom, #bfbfbf 0%, #d3d3d3 100%); } body div#devskin10611449 .bsbutton:active { background:#bfbfbf; background: -webkit-linear-gradient(top, #bfbfbf 0%, #d3d3d3 100%); background: -moz-linear-gradient(top, #bfbfbf 0%, #d3d3d3 100%); background:linear-gradient(to bottom, #bfbfbf 0%, #d3d3d3 100%); border-top:1px solid #adadad; border-left:1px solid #adadad; border-right:1px solid #fff; border-bottom:1px solid #fff; box-shadow:inset 0 0 0 1px #bfbfbf; -moz-box-shadow:inset 0 0 0 1px #bfbfbf; -webkit-box-shadow:inset 0 0 0 1px #bfbfbf; } /* ---- TehBoxesCry ---- */ body div#devskin10611449 .ibox { width:50%; margin-left:100px; } body div#devskin10611449 .ibox2 { margin-left:100px; } body div#devskin10611449 .ibox a, body div#devskin10611449 .ibox a:hover { text-decoration:none; } /* ---- button for real ---- */ body div#devskin10611449 .button1c, body div#devskin10611449 .button1b, body div#devskin10611449 .button1a { position:relative; background:#ef9554; background: -webkit-linear-gradient(top, #ef9554 0%, #ec7a35 100%); background: -moz-linear-gradient(top, #ef9554 0%, #ec7a35 100%); background:linear-gradient(to bottom, #ef9554 0%, #ec7a35 100%); border-bottom:1px solid #ef9554; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding:10px 15px; color:#fff; font-size:13pt; cursor:pointer; box-shadow:inset 0 20px #f09a5f, inset 0 21px #f2a675, 0 5px #ca5b19, 0 7px 2px #999; -moz-box-shadow:inset 0 20px #f09a5f, inset 0 21px #f2a675, 0 5px #ca5b19, 0 7px 2px #999; -webkit-box-shadow:inset 0 20px #f09a5f, inset 0 21px #f2a675, 0 5px #ca5b19, 0 7px 2px #999; } body div#devskin10611449 .button1c:hover, body div#devskin10611449 .button1b:hover { top:3px; box-shadow:inset 0 20px #f09a5f, inset 0 21px #f2a675, 0 2px #ca5b19, 0 3px 2px #999; -moz-box-shadow:inset 0 20px #f09a5f, inset 0 21px #f2a675, 0 2px #ca5b19, 0 3px 2px #999; -webkit-box-shadow:inset 0 20px #f09a5f, inset 0 21px #f2a675, 0 2px #ca5b19, 0 3px 2px #999; } body div#devskin10611449 .button1c:active { top:5px; box-shadow:inset 0 0 0 1px #ca5b19, inset 0 20px #f09a5f, inset 0 21px #f2a675; -moz-box-shadow:inset 0 0 0 1px #ca5b19, inset 0 20px #f09a5f, inset 0 21px #f2a675; -webkit-box-shadow:inset 0 0 0 1px #ca5b19, inset 0 20px #f09a5f, inset 0 21px #f2a675; } /* ---- info box ---- */ body div#devskin10611449 .info { position:relative; display:inline; } body div#devskin10611449 .info img { position:relative; top:2px; left:3px; cursor:pointer; } body div#devskin10611449 .info span { position:absolute; display:none; bottom:20px; left:-100px; background:url('https://fc06.deviantart.net/fs71/f/2013/315/e/e/journalskinbase_by_celvas-d6tvzn7.jpg') repeat; min-width:200px; border:1px solid #bfbfbf; padding:10px 15px; text-align:center; box-shadow:1px 1px 2px #999; -moz-box-shadow:1px 1px 2px #999; -webkit-box-shadow:1px 1px 2px #999; } body div#devskin10611449 .info:hover span { display:block; } /* ---- bottom index ---- */ body div#devskin10611449 .bindex { position:relative; margin-bottom:5px; margin-left:30px; color:#000 !important; font-size:7.5pt; z-index:50; } body div#devskin10611449 .bindex a { color:rgb(0, 0, 0); color:rgba(0, 0, 0, 0.4) !important; font-weight:300 !important; text-decoration:none; } body div#devskin10611449 .bindex a:hover { color:#ed8744 !important; } /* ---- shbox ---- */ body div#devskin10611449 .shbox { background:rgb(0, 0, 0); background:rgba(0, 0, 0, .03); border:2px solid #cacaca; width:70%; padding:5px; margin:auto; text-align:center; }

Celvas > Gallery > Tutorials & References

Introduction

Buttons.

You all know buttons, because buttons are everywhere. We mostly take them for granted. They are there to direct us to somewhere else and God protect a button that doesn't do exactly that. We rarely give them a second thought, despite the fact that the appearance of a button is as much a design choice as any other element; a button can make or break a design.

Small advice: Simple (or rather: easy to navigate) is the new black. We established that buttons are part of that equation. It is my experience that buttons in journal designs aren't that highly sought after. People want them for their function, and even then rarely use them. Myself, I love to make buttons for one simple reason: It's a tonnage of fun.

What we'll be doing

The button base

Hover and active states

1. What we'll be doing

This CSS button.

Kidding. We'll make a spiff one. I'll elaborate. We will make a button that is pushable. Meaning it appears 3D without being 3D, and has a push animation without actually being animated. It's an effect that is easily acquired, all in all, and, in this case, requires three steps: The basic button, the one that doesn't do anything but look good; the hover button, the one slightly pushed down upon cursor contact; the active button, the one completely pushed down.

Ah, I guess I should tell you why you need to fake an animation. It's a CSS3 feature, and deviantART compels you to use (pretty much) none of those. You don't even have all pre-CSS3 stuff at your disposal, and I tell you right now: a lot of the rad stuff you see the coders here accomplish have gone through a process of How-do-I-make-it-look-as-if. Sometimes, we're all Wicked Witches of the West, and I'm waiting for someone to point out exactly how many times I've recommended people to join a coven.

Moving on.

We will strive not only for functionality and animation-fake, but also for a spiff look. Which is why this tutorial will also cover some basics about the box-shadow property and how to use it (with care, and reckless abandon). There's more: I'll explain every property used, not in the greatest detail, but ensuring that you'll get the picture and can get to work on actively pushing your own troops towards claiming Fort Button.

2. The button base

Whoever said all roads lead to Rome has never worked in coding. This is my way of saying that the button I'll make here is an example button I have decided upon after a little deliberation. Once you got the basics down you can create buttons as clown-crazy as you like, and you can use images, and you can use images and CSS, and if you weren't on deviantART, you could also script the living daylight out of 'em, but as it so happens, images and CSS it will have to be.

For my button base, you'll need seven colors in hex code format.

Button Base

Two of them will be a linear-gradient that makes for the main part of the button, the background. One color goes to border-bottom, and the remaining four colors are the box-shadows, with one of them being the shadow. Now, the shadow usually is a grey shade as dark or bright as the general background requires. While a shadow that is too light isn't earth-shattering, a shadow that is too dark does fall into that category; it's a question of balance. If you're not that sure about CSS Syntax yet, you might want to read it up here before moving on to the code.

span.button {
Button Base

This is the selector. The dot signifies it is a class selector. Adding span or div before the dot is NOT necessary, but it does help to keep your code in check; just give it enough time and you won't know what in your code is what. But again, it's not necessary, and concering dA journal skins the use is mostly obvious. All that is necessary is a dot and a unique, but easily recognizable selector designation.

position: relative;
Button Base

The first declaration in this rule. There are several position values, but relative works best in this case. It means that the element - the button - retains its position but can be moved. For example, if you were to add the declaration top: 20px; to the rule, the element would deviate from its normal position by 20px, downwards. We will need the possibility of moving the button a few pixels down in the case of the hover and active state of the button.

background: linear-gradient(to bottom, #ef9554 0%, #ec7a35 100%);

The background property defines the background of an element. It can be a solid color, it can be an image, it can be a linear gradient, like in this case. to bottom defines that the first color hex will be put at the top of the element, and the final color hex at the bottom. The hex codes and percentages inside the brackets work pretty much the same way the gradient tool in Photoshop or Illustrator or GIMP work: The hex defines the color, the percentage the color stop. Here, #ef9554 is set to the position of 0%, and the darker shade is #ec7a35 at 100%. You can put more color stops inbetween. However, keep browser support in mind.

border-bottom: 1px solid #ef9554 ;

Per CSS, you can define a border for your element. Just using the property border will give you an all-around border, while defining the border in question limits the effect to that exact border. For those who haven't mastered the English language yet, border-bottom means that only the lower border is effected, while the upper, the left, and the right remain as is. The pixel value defines the thickness of the border, the second the type of border (there's also dotted, dashed, double, and some more), and the third the color of the border. The way I used it, it is a shorthand property! It is composed of border-width (1px), border-style (solid), and border-color (#ef9554 ).

border-radius: 5px;

border-radius defines the roundness of the borders of an element, which only makes sense when it is relevant (if you can't see it, you don't need it). Here, all four borders are rounded by the same amount in pixels. It's also possible to apply a value to each border individually. These properties go by the rule: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius. This is also the order of the shorthand (border-radius: 5px 3px 0px 10px; ). You can also not define a border in the shorthand, so it will use the same value as another border in the short. My shorthand border-radius example says that bottom-right is specified as 0 (zero); if I were to leave it out, the border-bottom-right-radius would be the same as the border-top-left-radius.

padding: 10px 15px;

Padding describes the distance between an element's content and the element's outer border. To clarify: padding is the distance INSIDE of an element. No negative values are possible. Margin is the one that defines the distance between elements outside of the element containing the margin value, where negative values are possible. Do not mix up. You could say I used a short-shorthand in this case. I wanted the padding top and bottom be the same, as well as the padding for right and left. 10px defines both top and bottom, 15px defines both right and left. There is a shorter variant (use only one value for a uniform distance) and a longer variant (use four values for each distance).

color: #fff ;

The color of the font you use for this button. This has no effect on any other text color outside this element. You might be inclined to say, "Well, it is intended to be a hex code, but I know for a fact that a hex has six digits." Yeah. If your hex code looks like #ffffff , you can write #fff and it will be translated correctly as the color white. The first two digits signify the strength of red, the second pair green, the third pair blue (hence RGB). When either of these pairs is the same, you can shorten them into one. BUT it's an all-or-nothing type of shortening. While #ee66bb can be #e6b , #ee66ba cannot be #e6ba .

font-size: 13pt;

The size of the font, obviously. You do not need to use pt, as I have. There are other CSS units you can use, and I want to shed light on one especially: em. 1em is the font-size in use. If you now used 2em to define the font-size of a specific element, it would double. This is very useful in that the font-size isn't set in stone and adapts itself to the basic font-size/font the reader uses. Say that's 13pt. Then 2em would be 26pt. 11pt, 2em would be 22pt. Point being: em is more flexible than most other CSS font units.

cursor: pointer;

Defines the cursor style on hovering your mouse over the button. Pointer is the value used for the hand graphic that usually indicates a link or the like. The standard cursor is auto. You can also implement custom cursors, but a) Internet Explorer is being a bitch about it, and b) describing the go-about of it would go well beyond the tutorial discussion. When defining a cursor, make sure you use those that are supported by every major browser.

box-shadow: inset 0 20px #f09a5f , inset 0 21px #f2a675 , 0 5px #ca5b19 , 0 7px 2px #999;}

This is where most of the magic happens. Let me just say that box-shadow is one awesome feature you can do real cool styling stuff with. A lot of people are of the believe that you can only use one shadow and that this shadow is an outset shadow, probably black; you know, your usual shadow. Well, you see the difference between all the code written so far and adding box-shadow. You can stack several box-shadows, and they don't necessarily have to be outset, which is the standard. In the first line, you can see that I have defined the first box-shadow stack as inset, which means the shadow is directed inward, and is actually being used by me for the highlighting. The second inset is one layer below the first and only covers one pixel a tad lighter for extra detail. After that comes what is responsible for most of the 3D appearance: the "side" of the button, with a darker color. The shadow stacked lowest is the shadow our button throws.

box-shadow: x-axis-value | y-axis-value | blur amount | spread amount | color;
You don't need to use all of these, as I've shown in the above example. But if you want to set the blur amount, you will have to write down x and y as zero (or any value you wish). X and y are mandatory, blur amount and spread are optional. If you want to go all the way through to spread without using x, y, or blur amount, you'll still have to code those in as being zero, or break the shorthand down.

The base is the heaviest part. The rest is adjusting what you already have, taking some things away and adding a few, mainly editing the box-shadow to fit the new looks of the hover and active states, and moving the button base a few pixels.

3. Hover and active states

This is a question of getting from a, the base, to b, the hover state, to c, the active state. To illustrate the point:

We'll be starting with the hover state of the button. As I said, this is, code-wise, relatively easy. It is more of a design and color question than anything, and understanding what needs to be done in order to achieve the partial push effect for the hover.

span.button:hover {
Whenever you see a colon used in a way similar to this, you are dealing with a pseudo-element. A pseudo-element is called such because it is not an element on itself. It is attached to an already existing element. All code applied to the button base applies to the hover state also. So all we need to do is put new stuff here, or override code lines.

top: 3px;
Since the button is positioned relative, we can move it down 3px for the push effect. Of course it's up to you by how much you move the button, and depends on your button, but keep the box-shadow in mind. It will need to be overriden to help the push-look along, or else the box-shadow will simply be moved down.

box-shadow: inset 0 20px #f09a5f , inset 0 21px #f2a675 , 0 2px #ca5b19 , 0 3px 2px #999;}
As you can see, the first two layers, the highlights, are left untoched. However, I decreased the "side", the third layers, by the amount I have moved the button down: 3px. Since the button is now closer to the background, the shadow needs to be adjusted to be thinner. I chose to decrease the y-axis value by 5px, but keep the blur amount.

Hover over me!

The next and final step is the active state. This is the state you'll get to see when you click on the button.

span.button:active {
Another pseudo-element. With this one, you control how, usually a link, but in essence everything you want to, reacts when a user clicks it. Here, too, we'll only change the placement as well as the box-shadow to give a neat pushed look.

top: 5px;
If you want to read about top, look up what I wrote in the hover state description. It's all the information you need in this case.

box-shadow: inset 0 0 0 1px #ca5b19 , inset 0 20px #f09a5f , inset 0 21px #f2a675 ;}
You'll see that there have been some changes to the order of the box-shadows, and that there are three, not four. Since the button is pushed inside, there is no more need for an outer shadow or what our eyes perceived as being a side of the button. The first value is a 1px spread without any blur to achieve a darker, inner border. It had to be put before the highlights, because they are inset, too, and would have hidden the upper part of the border. Don't forget the rule: top to bottom. First equals first layer, second equals one layer below the first layer, and so on.

Click me!

And that, ladies and gentlemen, is a perfectly pushable button. Enjoy the clicking orgy. I sure do.

Let's code!: Background Properties | CSS Progress Bar | The Perils of !important | Pushable Buttons | More...
Quick Info Fix: CSS Syntax | CSS: Thoughts on Shorthand | CSS: Element Positioning | CSS: On Nesting
Journal Skins: Raspberry Smooth | Cream and Black | That Girl With The Flower | Dragon Age: Grey Wardens