Image to Button generator

aaaaaaaahhhhhh

Hey folks
I need to turn an image into an image button, not just making an image a link but rather designing a button based on an image.


So for example, I want to take a picture of a bus, upload it and create



Any suggestions?

shane001daly

Hi, at the basic level all you need to do is wrap the image in an <a> tag to make it clickable.

<a href="#">
<img src="#" alt="#">
</a>

You'll need to set the size of the image but that's it at it's most simple.

If the image is square but you want it round, simply add a style attribute to the image
<img src="#" alt="#" style="border-radius:50%;">

If the image is a transparent png (white bus on a see through background) than add a background color to the style
background-color: red;

You may need to add some padding / margins as well, and maybe centre the image but that all depends on where you're putting the image.

If you want the image to do something when hovered over it you'll need some more styling and possibly an id

/* html */
<a href="#">
<img src="#" alt="#" id="clickable-image">
</a>

/* css */
#clickable-image {
border-radius: 50%;
background-color: red
height: 100px;
width: 100px;
}
#clickable-image:hover {
cursor: pointer;
}

If you have an example of what you'd like to copy I can have a look and get the html/css for you

tricky D

What do you want the button to do? Is it just a link or a form option element in which case the above wont work. Do you want the button to change as it is clicked?

aaaaaaaahhhhhh

Sorry about the delay folks. I'll give background.
I have a website http://www.travel2mania.com/


Its been given a redesign. The buttons at the end for time etc are all been replaced. But I want them to have the same design i.e. maybe circular, red with a drawing of a clock or bus, or ticket etc.


But I'm not a designer and need a way to make these buttons. I already have the buttons on the screen href'd to a page, but its the designing of the buttons I need.


Hope this gives some context.

shane7

It might be just as easy for you to use font awesome icons. 
You can change the color and and size quite easily. 
https://fontawesome.com/