Button Tutorial

Buttons are helpful if you would like to create dynamic, visual links inside or outside of your Aportfolio. This tutorial will walk you through the process.

NOTE: Go to your favorite photo editor either online or using software.  You could use Photoshop, Adobe Illustrator, or Pixlr. This tutorial is using Canva.com

Step 1



If you would like a square button, 125 x 125 pixels is a good size. If you would like a rectangular button, 120 x 90 or 120 x 60 pixels is good.  

NOTE: you should use pixels as your dimension measurement.

/Users/bodrykl/Desktop/Untitled design.png

Step 2

Choose a background for your button. Your background should be very simple with no distracting photos.

NOTE: This background features an ombre blue which is interesting, yet not overly distracting.

/Users/bodrykl/Desktop/Untitled design (1).png

Step 3


Add text

Choose a simple font for your button. This button uses Helvetica.

/Users/bodrykl/Desktop/LinkedIn (1).png

Step 4

Download or save your button. If you are using a website, download your image as a PNG. If you are using software, you should also save as a PNG.

/Users/bodrykl/Desktop/LinkedIn (2).png

Step 5

Now that your button is made, go to the Aportfolio page you made the button for.

 /Users/bodrykl/Desktop/LinkedIn (3).png

Step 6

Upload the PNG by either dragging it directly onto your page or clicking the blue button and choosing “upload file.”

/Users/bodrykl/Desktop/LinkedIn (4).png 

Step 7

Using the circles in the corner of the image, resize your button as you like.

Note: If you button looks blurry, it could be because it is stretched. Resizing the image should fix that problem.

 /Users/bodrykl/Desktop/LinkedIn (5).png

Step 8

Move the button to its desired location with the multidirectional arrow.  

 /Users/bodrykl/Desktop/LinkedIn (6).png

Step 9

To make your image a clickable link, click on the design icon.

 /Users/bodrykl/Desktop/LinkedIn (7).png

Step 10


Under the file settings, turn on “make image clickable” and paste your URL.

Note: You can choose whether the link opens a new window in the browser or not. We suggest using open in new browser if you are linking to sites outside of your Aportfolio such as LinkedIn.

You may also try messing with the “best fit” and “full image” options as well.

/Users/bodrykl/Desktop/LinkedIn (8).png 

Step 11

 Check that your link is working. To do this, first publish the page.


Step 12

 Click on the Published View. It’s located up and to the right of your menu.


Step 13

 Finally, click on your button.


 If you have additional questions, email us at aportfolio@appstate.edu