How To Create Free Buttons & Add Them To Your Website

In this video I’m going to show you how you can create free buttons for your website and then how you can actually put it on your website.

[s3vpp id=8cab04dc7e113a0ef2882c09eec9c269]

Transcription of How To Create Free Buttons & Add Them To Your Website

In this video I’m going to show you how

you can create free buttons

for your website and then how you can

actually put it on your website so we’re

going to use a free program called cool

text is that cool text.com / 2 buttons

and then there’s a bunch of different

styles you can see and you can just pick

the one you want

let’s just go with a plane button and

then we’ll just say continue course you

can put whatever text you need on here

here you can pick your font just click

on here and that brings up a bunch of

different fonts so you go into the

different categories and you see the

fonts there you don’t like that one you

can continue on so there’s just lots and

lots of choices here so this find one

that he’ll want to use on your site

let’s just pick this one and then you

have your text size here so that’s 20 .

text what you want in boulder at Alex

okay and then here we have our outline

thickness color and then we can see

shadows and the color the shadow and

action y offset that’s just the offset

from the edges and we have our button

shapes down here let’s go with this

shape and then again you have different

styles here so let’s do a horizontal

gradient as you see there’s lots of

other things you can do a line thickness

and color you have your shadow types and

color any effects a mouse-over effect if

you want to make it a spot when your

mouse goes over it and then the with

Kate this is in pixels

okay so we just pick our width and

height here now you click render button

and I can previous so here’s the image

and this is when you mouseover you see

here that’s what it does

ok now here you can download the image

let’s just download it to a folder I’m

going to use that I have my website in

okay so this is my test site with a

website usually have an images folder

sometimes you have another folder inside

here i’m just going to put it right

there is my button and it has some HTML

code here that you can use for the

mouseover effect

ok so just select this code and let’s do

a copy and let’s stick it in notepad is

open notepad here paste it in here

because we will need this to put on our

website Matt make sure you download both

images see this is the mouseover effect

here and this is the image for the most

over effect and this is the regular

image so we download this image was

download this image will save it to the

same spot

ok now we’re going to do is we’re gonna

go and put the image on our site i’m

going to use a web editor called

composer which is free

KMP özeti are like you see here you can

just do a search for that install now

let’s open the website that we want to

edit

ok and let’s just we’ll just put it

right at the bottom here and this is

just for demonstration purposes so it

doesn’t really matter now what we want

to do is grab that HTML code that we

just had just grab this

remember don’t rename the images if you

do then you’re going to have to rename

them in here as well

ok and then right here we’re going to

insert HTML and just paste this in here

now the only thing we are going to need

to do is put the images folder in front

of here because that’s where we loaded

it so we put images / in front of the

first PNG image and then when we find

the next PNG image will be the same

thing here so its images / and then

again here anywhere you see a PNG file

name click insert all right let’s save

this now let’s open it up go down to the

bottom for our mouse on it

you see there’s the most over effect ok

now one more thing usually with a

continue button you want to go somewhere

so click on it and click link here and

then where we want to go

so we’ll say Google got top . com click

ok ok once alternate text here just do

not use it

ok let’s just go to the link again make

sure this is correct and then while

you’re in here you do link is to be

opened and then in a new window if you

want otherwise it’s going to open in the

same window let’s save back to our site

and refresh now there’s almost over

let’s click continue and after Google we

go

ok so that’s how you can create some

nice buttons for free how to add it to

your website