HOME | DD

LineBirgitte — Button tutorial

Published: 2010-01-01 22:57:30 +0000 UTC; Views: 44222; 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

LineBirgitte In reply to ??? [2010-01-05 23:36:16 +0000 UTC]

hard-coded?

👍: 0 ⏩: 1

bendenfield In reply to LineBirgitte [2010-01-05 23:47:54 +0000 UTC]

Yeah. I don't know if it is the right name for it, but I mean buttons with text already on it. for example: [link]

👍: 0 ⏩: 1

LineBirgitte In reply to bendenfield [2010-01-06 00:23:00 +0000 UTC]

ah! Thought that might be what you meant. Well, sure - sometimes that's just easier - and will difinitly show the same way in all browsers

And if it's just for your own use, there's no problem, you can just make a new one whenever

👍: 0 ⏩: 0

bendenfield In reply to ??? [2010-01-05 00:02:15 +0000 UTC]

I know, but I tried it for my group #Rainmeter wich is a Super Group. Does it also works on groups' blog?

👍: 0 ⏩: 1

LineBirgitte In reply to bendenfield [2010-01-14 11:12:51 +0000 UTC]

yep

👍: 0 ⏩: 0

LineBirgitte In reply to ??? [2010-01-04 23:21:03 +0000 UTC]

should work - I used the exact same method making the buttons on =mintyy s journal, just yesterday.

👍: 0 ⏩: 0

ladyleonheart In reply to ??? [2010-01-03 03:33:51 +0000 UTC]

But how do you put two buttons side by side?

Great tutorial btw

👍: 0 ⏩: 1

LineBirgitte In reply to ladyleonheart [2010-01-03 04:07:33 +0000 UTC]

You repeat the code for the button

👍: 0 ⏩: 1

ladyleonheart In reply to LineBirgitte [2010-01-03 08:07:21 +0000 UTC]

They appear stacked, though o:

👍: 0 ⏩: 1

LineBirgitte In reply to ladyleonheart [2010-01-03 08:30:12 +0000 UTC]

are you using an a-tag set to inline-block?

👍: 0 ⏩: 1

ladyleonheart In reply to LineBirgitte [2010-01-03 08:48:29 +0000 UTC]

Oh! It's fine, my friend helped me fix it already!

Thank you for your assistance though c:

👍: 0 ⏩: 1

LineBirgitte In reply to ladyleonheart [2010-01-03 08:53:04 +0000 UTC]

Awesome!

No problem

👍: 0 ⏩: 0

DRX-Design In reply to ??? [2010-01-02 22:30:52 +0000 UTC]

Amazing!!
Nice Job

👍: 0 ⏩: 0

nanagnos In reply to ??? [2010-01-02 21:50:54 +0000 UTC]

Ha! Just a few hours ago I tried to find my way in the same thing using Gimp. I think I can translate this to Gimp. Useful anyway. Great job!

👍: 0 ⏩: 1

LineBirgitte In reply to nanagnos [2010-01-03 09:03:21 +0000 UTC]

Yeah, I don't think that will be a problem

👍: 0 ⏩: 0

Dark-Choosen In reply to ??? [2010-01-02 21:50:42 +0000 UTC]

Thanks Brgtt (is that right lol) this has helped me outstandingly. I am just learning the basics of html but I have no clue what css is lol. Maybe you could teach me some time?? If not then Ok lol. Thanks again. (Working on a button!)

👍: 0 ⏩: 1

LineBirgitte In reply to Dark-Choosen [2010-01-03 09:02:58 +0000 UTC]

I you look right underneath the deviation beside the artists comments there are like 4 groups - 3 of them are dedicated to css, so go check them out!

👍: 0 ⏩: 1

Dark-Choosen In reply to LineBirgitte [2010-01-03 12:55:06 +0000 UTC]

Alright dude lol

👍: 0 ⏩: 0

hureschwaine In reply to ??? [2010-01-02 18:11:36 +0000 UTC]

what a great tutorial *-*!
I'll try it as soon as possible, it seems really easy to make ^^

👍: 0 ⏩: 1

LineBirgitte In reply to hureschwaine [2010-01-03 09:01:56 +0000 UTC]

Do it!

It is really easy!

👍: 0 ⏩: 0

RollingStonesStudios In reply to ??? [2010-01-02 17:25:48 +0000 UTC]

Awesome xD Thank you so much for this wonderful tutorial,it is a little confusing at times, but I think I'll get it With other tutorials, they lose me at 'Today we will be learning to how to make a button.' LOL xD

👍: 0 ⏩: 1

LineBirgitte In reply to RollingStonesStudios [2010-01-03 09:01:15 +0000 UTC]



btw - you can center stuff by using

text here
but not in comments

👍: 0 ⏩: 1

RollingStonesStudios In reply to LineBirgitte [2010-01-03 14:53:21 +0000 UTC]

Thanks

👍: 0 ⏩: 0

VaKonS In reply to ??? [2010-01-02 16:08:49 +0000 UTC]

Thank you!

👍: 0 ⏩: 0

zulima In reply to ??? [2010-01-02 12:52:57 +0000 UTC]

supa amazing! Thank you

👍: 0 ⏩: 1

LineBirgitte In reply to zulima [2010-01-03 09:00:18 +0000 UTC]

👍: 0 ⏩: 0

Blubjee [2010-01-02 12:51:23 +0000 UTC]

Very good tutorial I think I'll use it sometimes

👍: 0 ⏩: 1

LineBirgitte In reply to Blubjee [2010-01-03 09:00:07 +0000 UTC]

Great!

👍: 0 ⏩: 1

Blubjee In reply to LineBirgitte [2010-01-03 12:16:39 +0000 UTC]

👍: 0 ⏩: 0

bla2e In reply to ??? [2010-01-02 12:31:28 +0000 UTC]

Awesome man
Really loved it

👍: 0 ⏩: 1

LineBirgitte In reply to bla2e [2010-01-03 08:59:59 +0000 UTC]

Yay!

👍: 0 ⏩: 0

PatrickRuegheimer [2010-01-02 11:16:26 +0000 UTC]

Oh god, yay, thanks for this!

👍: 0 ⏩: 1

LineBirgitte In reply to PatrickRuegheimer [2010-01-03 08:59:51 +0000 UTC]

👍: 0 ⏩: 1

PatrickRuegheimer In reply to LineBirgitte [2010-01-03 11:22:27 +0000 UTC]

👍: 0 ⏩: 0

BaB-Jane [2010-01-02 11:08:27 +0000 UTC]

OMG Awesome! You rock Line!!

👍: 0 ⏩: 1

LineBirgitte In reply to BaB-Jane [2010-01-03 08:59:38 +0000 UTC]

👍: 0 ⏩: 0

Pyritie In reply to ??? [2010-01-02 11:04:47 +0000 UTC]

oh jeez this is epic

👍: 0 ⏩: 1

LineBirgitte In reply to Pyritie [2010-01-03 08:59:29 +0000 UTC]

👍: 0 ⏩: 0

SimplyLemie In reply to ??? [2010-01-02 10:39:11 +0000 UTC]

This looks great

👍: 0 ⏩: 1

LineBirgitte In reply to SimplyLemie [2010-01-03 08:59:20 +0000 UTC]

Thanks

👍: 0 ⏩: 0

nahp75 In reply to ??? [2010-01-02 10:28:29 +0000 UTC]

very clear and helpful!

👍: 0 ⏩: 1

LineBirgitte In reply to nahp75 [2010-01-03 08:59:08 +0000 UTC]

Thanks! I'm glad you thinks so

👍: 0 ⏩: 0

GinkgoWerkstatt In reply to ??? [2010-01-02 09:31:38 +0000 UTC]

Awesome tutorial!!

I'm sure this will be helpful for a lot of people!

👍: 0 ⏩: 1

LineBirgitte In reply to GinkgoWerkstatt [2010-01-03 08:58:52 +0000 UTC]

I hope so!

👍: 0 ⏩: 0

okiz [2010-01-02 09:07:59 +0000 UTC]

rofl, nice. THX

👍: 0 ⏩: 1

LineBirgitte In reply to okiz [2010-01-03 08:58:38 +0000 UTC]

👍: 0 ⏩: 0

KitsuneTenchi127 In reply to ??? [2010-01-02 06:59:49 +0000 UTC]

Very informative!! A great reference for later on when I'm designing my website <3

👍: 0 ⏩: 1

LineBirgitte In reply to KitsuneTenchi127 [2010-01-03 08:58:31 +0000 UTC]

Cool! Glad it helps

👍: 0 ⏩: 0

havockid In reply to ??? [2010-01-02 06:29:55 +0000 UTC]

haha call me really dumb >< but what are buttons for? and where can i use it

*oh god i feel so dumb*

i mean. i guess i know u can click on it to go to a certain... URL right?
since i dun have premium membership, im thinking its only really useful if u say.. make a webpage or sumthing? hahah

👍: 0 ⏩: 1

LineBirgitte In reply to havockid [2010-01-02 12:41:01 +0000 UTC]

You got it right! Buttons are used to visit pages - and other things as well - like if you wanted to reply to this comment you hit the "reply"-button

And yeah, on dA you need premium membership to use buttons

👍: 0 ⏩: 1


<= Prev | | Next =>