HOME | DD
LineBirgitte — Button tutorial
Published: 2010-01-01 22:57:30 +0000 UTC; Views: 44221; Favourites: 1057; Downloads: 1020
Redirect to original
Description
I know it's long, but it's mostly images, so you should all be able to follow it no matter the level of lazyness
Thanks to `pica-ae and =ssst for reviewing the tutorial - and a big thanks to ^Ikue - you know why.
The psd for the finished buttons plus the css is included in the download - plus a html version of the tutorial.
Basic tutorials about photoshop can be found in #MasterPhotoshop
Basic tutorials about html and css can be found in #eCSSited , #deviantCSS , #CSS-Babes and on my journal page
Go make buttons for the contest at #CSS-Babes and win wonderful prizes!
if you discover I made a mistake somewhere please let me know so I can correct it. - and if you have any questions feel free to drop me a comment
Related content
Comments: 195
I don't have photoshop, do you have a tutorial for Paint Tool SAI? :0
👍: 0 ⏩: 0
I don't have to use photoshop... correct? FireAlpaca would work just fine?
👍: 0 ⏩: 0
haha I was thinking of making one... I'm not now
👍: 0 ⏩: 0
Could you please explain me how I can make it usable for dA. Like the code for it and stuff... And to put a link in it? I don't get it
👍: 0 ⏩: 1
You can submit it to dA, then use the thumb code
Edit: lmao I didn't realise this comment was from 2013
👍: 0 ⏩: 0
thanks for this awesome tutorial! I'm sure it'll come in handy.
also, you use Coda? I should probably consider getting that...
👍: 0 ⏩: 0
There is a mistake that I fixed...in the coding for the [link] " alt="love"/> but you shouldn't have done "images/" before the emotes link. ^^
👍: 0 ⏩: 1
Maybe it was just my computer, but it was on the bottom next to the text: "- oh and please show me your buttons!"
👍: 0 ⏩: 1
oh, you're looking at the html version?
👍: 0 ⏩: 1
Yes. Not the picture, that's fine. The HTML version needed to have an existing image adress.
👍: 0 ⏩: 0
Thanks for this tutorial!
But when I click on it, the b won't activate (actually, it doesn't even change if I hover over the text.) D:
Can you help me at this point? I don't know how to make it work... .-.
👍: 0 ⏩: 0
If you make a button like this -->[link] and you want to make it a picture link, how do you center it on your wiget? I got far enough were it is a link, but I can't center if. (if you have the time, scroll down to a wiget on my profile that says 'Clicky Clicky!' and you'll know what I mean.)
Thanks!
👍: 0 ⏩: 1
why not just put the picture in the widget like this:
<div align="center"><a href="link"></a></div>
👍: 0 ⏩: 1
Thanks, but naturaly I tried that. 
👍: 0 ⏩: 1
I thought it was a small picture, if crop the picture you can make it be centered.
👍: 0 ⏩: 1
Oh, kk. Do you know what size to make the pic?
👍: 0 ⏩: 1
Just crop it till the edges of the graphic
👍: 0 ⏩: 1
Thanks for all of your help, but I don't know what you mean. The little picture that says 'Commissions' I have made really small and then really big, and inbetween. I even tried it without the colorful background. I still can't get it to center. I even asked a friend to note me the exact code they used for their commission button and it was exactly the same, no 'div align="center"' or anything. So I'm stumped.
👍: 0 ⏩: 1
Looks like you figured it out
👍: 0 ⏩: 1
Yah, it was the wrong size XD I just needed to make it smaller. Thanks for your help though! I don't think I could have figured it out without your help.
👍: 0 ⏩: 0
I absolutely adore this tutorial and it has been insanely helpful for me when coding my new journal layout! 
👍: 0 ⏩: 0
Just for a button....D:
But its very in depth, thanks :'D
👍: 0 ⏩: 0
Thank you for the awesome tutorial. It's easy to understand and it's a very well thought out guide
👍: 0 ⏩: 0
Thanks for the tutorial. Used it for a DeviantART button! [link]
👍: 0 ⏩: 0
You won't be able to get that crispy pixel perfectness, but whatever floats your boat
👍: 0 ⏩: 1
The code is so long... How come the coding for buttons like this [link] is smaller?
👍: 0 ⏩: 1
The code isn't longer - this tutorial shows you how to make your own buttons; the other one shows you how to use dAs already excisting ones.
The code that you think is long is css, the html in this code is actually shorter than in the dA buttons.
👍: 0 ⏩: 1
oooohhhh! Okay! That makes sense
Thank you
👍: 0 ⏩: 0
Thanks so much for the lovely tutorial. 
👍: 0 ⏩: 0
fine just take how i know to make a button and put it in the trash. well done sir.
you shall be honored be a 
👍: 0 ⏩: 0
| Next =>