literature

Let's code! Pushable Buttons

Deviation Actions

Celvas's avatar
By
Published:
61 Comments
16K Views

Literature Text



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.




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.




Coding the tutorial style took up more time than the tutorial itself. It would appear I am doing something wrong. :p

Anyway. I hope this helps, even if you do not use the information given to create buttons (though I'd totally love to see your CSS buttons). However, do not dismiss buttons as a mere necessity. The sad story about most fine design element is that people only look twice when something's wrong about them. If anything, you don't want them to take notice of the minor elements. There has to be a balance, and the concept must show which elements are important and therefore to be styled as the center of attention, and what elements would hurt the experience by diverting attention from the important stuff. It is tempting to make everything about your design exceptional, but overloading people's brains will only confuse them. Some more free advice, while I'm already at it. :D

As usual, a comment from you would make me very happy, and should you have questions, feel free to bring it up in a comment or drop me a note. :)

On another note: TehAngelsCry, SimplySilent, GillianIvy. :hug:


If you found this helpful, consider donating points with a click of one or more buttons, and a bit of keyboard interaction! :)

© 2013 - 2021 Celvas
Comments61
Join the community to add your comment. Already a deviant? Log In
goosetooth's avatar

is there a way to turn an image into a button?

ArtistiaCons's avatar
This is actually very helpful. I didn't know if you would break every little detail together, it doesn't seem so hard to code than you would first think it is to be.

I gladly appreciate that this would help me in the works of coding, as I really want to learn how to code better(but as stated in your description, I won't be using this for buttons as far as how everyone likes to use it to their advantage). I will be taking this as a sign of coding that will help me better into learning how to make my own code ^^
pastelmagma's avatar
My issue is I have no idea how to put CSS on deviantart. And my that i mean, i have added a custom widget to my profile page. How do I put this code into that custom widget to make this button appear, because rn when I ry to do that the code itself is all you see. I've wanted to make buttons for ages but that one hurdle, nobody ever describes. It's like we're all supposed to just magically know how its done and that barrier of entry sucks 
Cuberman3141's avatar
How do I put this in my profile
pastelmagma's avatar
my exactly question
splat-cat927's avatar
Does any of this still work for non-core people?
Celvas's avatar
As far as I am aware, none of this ever worked for non-core members. Sorry. :(
emocx's avatar
ahh! I was searching for this since I made a comeback from long hiatus~!
(inactive since june 2014 & made a comeback in may 2017)
must +fav so this tutorials wont go anyway :giggle:
Trillo-Lillo's avatar
this is very nice! I read it, and I was wondering, does this work in deviantart journal css??? and if it does, where do I put it? I'm confused
Celvas's avatar
Yes, it does. If you don't know how to implement it, maybe it would be best if you first read about CSS fundamentals. You can create journal skins on deviantART via the editor; you can find it where you change your journal design. There is no definite hierarchy outside of a CSS rule. Basically, you could style the header but put the code at the end. Knowing the syntax would be a good first start.
Trillo-Lillo's avatar
thanks for answering!! I've been experimenting with css and this "how to create a button" helped me a lot!!

thank you so very much! you're awesome! :la: :love:
Celvas's avatar
I'm happy to hear that. Should you have more specific question, I would gladly provide you with answers. Check out w3schools if you haven't already. Makers of CSS, worth a look. They have great documentation, explanation, even samples you can play around with.

And I'm not that awesome actually. I just really enjoy box-shadow.
123artpunk's avatar
I tried to read your coding tutorial for buttons......but im toooo tired...i really kneed to sleep........yaawwn!
Id like to learn one of the languages.............ummmm i cant remember the name......not basic....or python......or...or ruby...…uuugh!
Well anyways id likie to build a little robot.........id like to use àn arduino for somne art projects......ever read make magazine?
kuredesu's avatar
oh my. perfect! Just the thing I am looking for!
Thank you!! :iconthankyouplz:
Celvas's avatar
Thank you. I would like to point out, however, that you can add transitions to make the "animation" more fluent. Like, for example, adding the bit

transition: all 0.3s ease;

-> "all" can also be a specific declaration (background-image, opacity, etc.).
-> "0.3s" is the time the transition will need to execute (300ms would also work just fine as a value; it's the same thing, only not decimal).
-> "ease" is the property.
-> There's still more to it, so if you're interested at all, read this.


to the button's normal state style. I haven't tried that one out, yet, to be honest - not with buttons at least - but I'll still say this in case you'd want to play around with it. :)
kuredesu's avatar
thanks very much! I'll be playing with these later on! ;)
Kyasarinn's avatar
Wow wow wow I didn't know abot making buttons in CSS Its pure magic :heart: Wow!
Thanks for this!
That's pity we can't use CSS in custom boxes on DA :c
Celvas's avatar
Thank you! I'm really happy to read this kind of comment. :aww: box-shadow is one hell of a thing, isn't it?

AND you can do it. Take a look at my profile. You just have to use favourite deviation widgets. Exactly
Machina-Su's avatar
hello ! :D i'm very interested in making an image change when the mouse goes over it (with mouseover) but, how can I make it in the favorite deviation widget ? there are no css ?
Celvas's avatar
You need to make a journal skin, assign it to a document, and make that your favorite deviation to have it show up in that box.
Machina-Su's avatar
yes ! thank you ! i've finally found the answer ! thank you ! ^^i'm going to create my own journal skin (let's cooode ! XD) Thanks ! :)
Kyasarinn's avatar
Yeah, I know but I mean directly codes css eg colorful lettering in color html and not by a journal.
Celvas's avatar
I know what you mean, but you're limited to the color codes deviantART itself uses. So it's either journal skins or being content with having a very limited selection. That's why I said fav deviation widget; it's no use complaining.
Join the community to add your comment. Already a deviant? Log In