Loading...

Top
PFQ Banner

This is PokéFarm Q, a free online Pokémon collectables game.

Already a user? New to PFQ?

Single post in Whitley's School of Art and Design

Forum Index > Pokémon > Pokémon Art > Art Schools > Whitley's School of Art and Design >

Whit's AvatarWhit
Whit's Avatar

BBCODE AND CSS 101 LESSON 1: Styling a button

Here we have code for a button! Today, we'll learn how to style it.
[center] [url=https://pokefarm.com/user/Whit] [sc=mybutton]My Profile[/sc] [/url] [/center]
  • Unstyled
  • Styled
First, let's review our BBCode.
  • [center] will center the button inside of our container.
  • [url=link] will link to where we want our button to take us.
  • [sc=mybutton] will load the style of our button. Inside here is where we'll label our button.
  • [/sc] will end our styling.
  • [/url] will close out our link.
  • [/center] will stop centering anything below that point.
Next, let's color our button. Open up a [style] tag at the beginning of your post, and close with [/style] right before your post content starts. Inside, we'll define our button style. Like so.
[style] .mybutton { } [/style]
In between the brackets { } is where we'll add our coding for colors. to start, the color: tag defines text color. the background-color: tag defines the box color. We'll also want a red text-shadow:, You'll see why later. So since we want a red box with a red text shadow and black text, we'll type:
[style] .mybutton { color: black; background-color:red; text-shadow: 1px 1px 0px red; } [/style]
Make sure to close out each line with a ;, otherwise, both that line and the one below it won't work. Now, we'll add our border. To get a uniform border all around, you only need to specify one border: line. However since we have 4 border colors on our button, we'll be using border-left:, border-right:, border-top:, and border-bottom: like so.
[style] .mybutton { color: black; background-color:red; text-shadow: 1px 1px 0px red; border-top: 2px solid white; border-left: 2px solid lightgray; border-right: 2px solid gray; border-bottom: 2px solid black; } [/style]
Now, we need four extra lines to make our button really work and look good. display: inline block; will make our button flow with text, and center like it too. width: will set how big our button gets. padding: will add extra space around our box so our text has a little breathing room, and box-sizing: border-box; makes it so that even though we're adding padding, our box won't go over it's set width. So let's add that.
[style] .mybutton { color: black; background-color:red; text-shadow: 1px 1px 0px red; border-top: 2px solid white; border-left: 2px solid lightgray; border-right: 2px solid gray; border-bottom: 2px solid black; display: inline-block; width: 100px; padding: 10px; box-sizing: border-box; } [/style]
But we're not done yet! We want our button to change color when we hover over it, and when we click on it! So we're going to be opening up two actions by our classes: .mybutton:hover{ } and .mybutton:active{ }! Hover changes color on, well, hover-- and active changes color on click. And now we can see our beautiful text-shadow on an action, too!
[style] .mybutton { color: black; background-color:red; text-shadow: 1px 1px 0px red; border-top: 2px solid white; border-left: 2px solid lightgray; border-right: 2px solid gray; border-bottom: 2px solid black; display: inline-block; width: 100px; padding: 10px; box-sizing: border-box; } .mybutton:hover{ background-color:yellow; } .mybutton:active{ background-color:orange; } [/style]
And there you go! You have a button code that you can put into any template! Good work!

Try it yourself! Post your custom button below!

Whitley - It/Its/He/Him - 21 DO NOT USE THEY/THEM PRONOUNS FOR ME.

Current Chain: 0 | 33

© PokéFarm 2009-2020 (Full details)Contact | Rules | Privacy | WikiGet shortlink for this page