HTML Cool Codes: 2012

Monday, 2 April 2012

One HTML code - Two HTML Buttons

I love quickness when it comes to HTML codes and as I am constantly changing my mind about what type of button to use, it made sense to me to have just one lot of code that would give me two buttons.

It was really important to me that I kept it user friendly because I wanted to be able to save you guys some time aswell, whilst still leaving you headache free.

With that in mind, the code I came up with simply requires you to delete a bit of code and thats it, button number two makes it's appearence!

Button No.1 - No code has been deleted.

(Button No.1 has a push down effect and you can change the buttons background colour.)

Button No.2 - The text ( background-color: #fdb9da; ) has been deleted from the code.

(Button No.2 has a mouseover effect but you can not change the buttons background colour unlike Button No.1)

This is the code used in the above examples. Please feel free to use it.

(Just delete the highlighted section to change the button type).

<html>

<body>

<a href="http://www.google.com">
<button style="background-color:#FDB9DA; height: 70px; width: 320px; font: bold italic 32px Arial; color:#B2079E;"> <div align="centre">Enter Text Here!</div></button></a>
</body>
</html>

Want to know how to change the height, width, text alignment, linking, and change the bold or italic for this code?

Then visit my HTML Button Step-By-Step Guide for lots of detailed information and pictures.

Friday, 30 March 2012

HTML Button Code To Put On Your Website

Hope you haven't spent too long searching crawling the Internet looking for a html button that's going to look good on your website.

I did that! And come up with nothing!

So I designed my own html button code that can be changed to look just the way you want it to.

Please feel free to use it! All text in purple can be changed.

<html>

<body>

<button style="background-color: #99C7FF; height: 35px; width: 160px; font: bold italic 16px Arial; color:#000000;"><div align="centre">Enter Text Here!</div></button></a>

</body>

</html>

*Go ahead and try it if you want, just hit the back button after*

Here's what you can do with this HTML code.

Change the size of the button (height and width

Change the text appearance (bold/ italic/ font/ size and colour)

Align text (left, right or centre)

Link to a webpage within your website

Link to a page outside of your website

Change the background colour of the button

See picture below for how to use this HTML code, or if you would like to know how in more depth then please visit my HTML Button Step-By-Step Guide and I'll take you through each step with lots of useful pictures to help you on your way.

Tuesday, 27 March 2012

Welcome To HTML Cool Codes

This is where I design some really cool HTML Codes and put them all on here for you guys to use for free.

Nothing quite beats the feeling of finally seeing a bit of HTML code up and working after days or weeks of banging your head against the table. But hey... What good is all that effort if it's only me that gets to use it?

What keeps me going on a tough bit of code? Well, I tell my self that 'It's just a bit of code and at the end of the day and in one way or another, it has to do as I say'. I just have to tell it what to do correctly!

And I have to admit it's kind of cool when my family look over my shoulder, squint their eyes, pull a few funny faces and ask 'what's with all the dots and hashes?' "I'm designing some HTML code". "Hmmmm...." they reply reluctantly to me as they quickly scatter off before I can possibly scramble their heads with the details.