Use Drawing as Button on Site

The beauty of Google Sites is that it works seamlessly with the apps in Drive. However, when you insert a drawing, that's all you do: insert a drawing. If you want to add the functionality of linking to another page, then this is the post for you.

The best thing about using Drawings to make buttons for a site is that you can make the buttons in whatever shape, color, doodle, etc. that you want.

Something to keep in mind:  we are going to be making the drawings into .png files, so the checkered background will remain transparent, but it will save as whatever size the canvas is. If you'd like to change the size of the canvas, in the lower right hand corner of the canvas, you'll see some lines that you can drag the canvas to a size you'd like.

When I inserted these buttons on to my Google Site, I kept the canvas at the default size because I felt that it added some spacing in between the buttons that helped it not look too busy.

I am going to demonstrate using the button that I created in my previous blog post about adding shadows. And if you would like to see my finished buttons and site layout, go to www.teacherubow.com

Saving the Drawing as .png

Once you have your button created in Drawings, you need to download it as a .png file:

Once you have the .png file downloaded, now you can work on inserting into your site.

Insert button onto Site

To insert it onto your site, you first need to edit the page you are on (Click the pencil in sites, or keyboard shortcut - e)

From there you you have three options for when you insert an image:

• Click insert image and upload
• Click insert image and provide URL 
• Click on drive, and choose an image in your drive. 
• If you choose an image from your drive, you'll need to make sure that the sharing permissions are set so people can view the image, otherwise it will not show up on your site. 

Design and Sizing of Button

Now here comes the part where you decide how you want things to look. For my site, I had about 7 of the same size buttons that I wanted to link to other things.  If you are going to add more buttons, you'd probably want to change the size. But this is all up to you. 

Just click on the icon, make it a size that you'd like, and position it where you would like.

Creating an Active button with a link

Now you need to direct the button to whatever link you would like. When you click on the image, there is a button for you to change the link. That is where you need to be to redirect when a person clicks the button.

Since this button says email me, we'll create a link to send an email using the command: mailto:insertemail@gmail.com

Don't forget to save your changes in Sites. Unlike Docs, Slides, and Sheets, your changes are not automatically saved.