What is up, Measure friends?
This is Eric from MeasureSchool.
Today, we're going to show how to build various kinds of buttons in Looker Studio,
whether it's a simple button like this, or navigation buttons,
or buttons with hover effects, and even custom design buttons with an icon,
a box shadow that you can click on to chat with Jenny here.
Do not undervalue buttons, they are very useful to enhance your
dashboards and improve the user experience.
But what do we mean by that exactly?
Buttons allow you to include your call to actions,
point users to your resources, and even guide them through your funnels.
For example,
I have embedded a Looker Studio dashboard in this web page
which allow visitors to come and click on this button to go to the full dashboard
to explore the data and find their own insights.
Buttons are also very useful to help your users to navigate through your reports.
This report has multiple pages, but the page control is not very visible
and there are additional steps to get there.
First, you have to hover your dashboard, then go to the bottom to click
to the arrow to show the page control, and then select one of the pages.
You can simplify this process by having
navigation buttons like these or like the following.
When it comes to buttons with hover effects, they are usually useful
for dashboards with dark themes or that are overcrowded with data.
They help differentiate between what's
clickable and what's not and also highlight key elements.
Also, if your client is using them on their website, then you may want to use
them again so that you keep the brand's design consistent across platforms.
If all this sounds good to you, then let's get started and just follow along.
Let's rebuild this basic button.
I'll delete it.
To build the basic button in Looker Studio, you can use the Text icon.
Go to the toolbar at the top and select Text.
Then click anywhere on your dashboard.
Type your text.
Make sure to select your text.
Increase the font size to 28.
I'll center the text and below, insert a link.
Now, because I have preselected the text, it will be displayed here.
Otherwise, you'll have to repeat the process again.
Below, you can either paste any one
of your links or just click to link to one of the pages of your report.
Click Apply.
This is the result.
Now let's add a border.
Select your text box
and in Text Properties, scroll down and go to Border Color.
I'll just use black.
To make it more visible, you can increase the border weight.
We'll select 4.
I'll also increase the box size so you can see it a bit better.
Here you go. You have a button in Looker Studio.
Now, this is the very same technique
that we have used to build our pagination that you can see here.
There are however, two issues with this technique.
First, only the text link is clickable,
as you can see with the mouse and not the surrounding areas.
Also, you may probably want to remove the underline.
To do so, edit your button and let's select the text box
and you can click on underline to remove the underline.
First, before showing how to remove, to solution the issue of the non clickable
spaces, I want to design my button a bit further.
I'll select the text box.
Let's change the background color to red and I'll select the text.
Change the font color to white.
Now you can also play around
with the border radius to design your buttons further.
Scroll down and let's select 15.
We have a button similar to the one that you've seen before.
Now, to solution the issue of the non clickable spaces, you have two options,
either reduce your button size or another option is to add an image.
For this, go to the toolbar at the top, click image,
select any image that you feel like, and then on select preserve aspect ratio.
This will allow you to resize the image to the exact size of your button.
Now in the image link URL, go to insert
link, paste your link or click to link to one of the pages of your report.
Click Apply, and then go to style, capacity and set it to zero.
Now the entire button can be clicked.
Let's see now how to build our navigation buttons.
To build navigation buttons, you can again use the text icon
and in fact, we'll use again some of the techniques that you saw earlier.
Click on text, click anywhere, type of text.
I'll change the text color to white and center your text.
I'll adjust the text box to the panel and I'll change the background color.
Let's resize this.
Now I will select my text as we did earlier.
Go to insert link, select one of your links and make
sure that the link is related to the page that you want to send your users to.
Click Apply, then change the text color
again to white, remove the underline, and here you go.
Now, let's duplicate this.
Select your text box
and you can either right click and click duplicate or copy paste.
You can also use your keyboard shortcut to do the same.
Let's drag it here.
Now, I will change the text and remove the background color to transparent.
Repeat the process to make sure that you send your users to the right page.
I have two pages, one to welcome my users
and another one for traffic, so I have to set this page to the traffic page.
Insert the link and change again, color to white, remove the underline.
If this happens, one trick is just to refresh your dashboard.
Then select your text box again and let's
change again the font color to white and it should work this time.
Here you go.
Use your CTRL key on your keyboard and then also select with the right click,
select both of these text box and copy them.
I'll just copy them. Go to the next page.
We'll go to our traffic page and then just paste.
Now here, we'll just make sure to remove the background color of the first
navigation button and let's set it to transparent.
Let's change the second one too, with a background color.
This is how you get this result.
Now, let's look at how to build a button with a hover effect.
To build buttons with hover effects, we'll need the help of HTML and CSS.
If you're not familiar with the markup
language, that's fine because there are plenty of resources online with prebuild
buttons where you can just take the code and use them here.
In fact, we'll share a resource with you
where you can find various kinds of buttons with different hover effects
and just grab their codes and use them in your dashboards.
Let's rebuild this button.
I will delete it.
We will need to go to the Community Visualizations and Components.
In the top of the toolbar, go to Community Visualizations.
Click explore More
and scroll down to find the templated record, which was built by Romain Vialard.
Click on it.
Click anywhere on your dashboard.
Now, let's add our HTML and CSS.
Because I already have it, I'll just go to style and just paste it there.
Make sure to remove this code and I'll just paste my HTML and CSS here.
Now, there are two issues to be aware of with these kind of buttons.
First of all, you may find sometimes that the button is cut off.
To solution this, just add the minimum width of 100 pixel.
Also, keep in mind that when you're using a dashboard that has a hover effect
and that you embed in a web page, because this is a community visualization
component, you may be prompted with this message that basically lets
users know that they must proceed with caution.
The button will still work, but just keep this in mind.
Lastly, how to build a button where you can let your imagination go wild.
Very simply, this button is actually an image that was built in Canva.
Now, before uploading the image
to Looker Studio, make sure to resize the image to the surrounding areas
of the button and also download it as a transparent image.
If you don't have access to these Pro
features, you can use a tool like Photopea, for example.
Here, I've uploaded the image to Photopea
and cropped it to the surrounding area of the button like so.
You can also export it then after as
a JPEG or PNG file, and then go to a tool like remove.bg,
there are plenty of them online that makes your background transparent.
You can just upload an image and it will automatically remove the background.
Now in Looker Studio, we'll just delete this image.
Go to the toolbar and add your image.
Upload your image.
Make sure to select the one with the transparent background.
Now, you'll notice that by default,
Looker Studio will set your image with the white background.
So go to style and go to background and border and set it to transparent.
Let's resize our image and let's add our link.
Make sure to select your image.
Go to set up, insert your link, paste your link, click Apply.
Now, let's test this.
Here we're led to the chat page.
By the way, sorry if you're expecting to see Jennifer.
So we've looked at various ways
of building beautiful buttons in Looker Studio.
I truly hope that you enjoyed this tutorial.
And if you did, please like the video and share your thoughts with us.
Anyway, this was Eric from MeasureSchool. See you next time.