The easiest way I found to make gamipress buttons is through the elementor plugin.
Through elementor add a button block. Style your button the way you like and then in the advanced tab insert the button id into CSS ID. In the CSS Classes enter gamipress-button
In your case;
CSS ID: goal-1
CSS Classes: gamipress-button
If you are set on using code you can use gamipress short code. And to style it you can enter CSS code in the Themes>Customise>?>Custom CSS
Here is what I have used.
[gamipress_button id=”Test1″ label=”GamiPress Website” onclick=”window.open(‘https://gamipress.com/’,’_blank’);” class=”button”]
The id is the trigger
Label is the label on the button
onclick is the js code to trigger. I use window.open for pages away from my website must include ‘_blank’
class is the style of the button and refers to the CSS code.
here is an example of the CSS code I have entered to style a button
.button {
background: #f4511e;
border: 2px solid #black;
color: white;
padding: 20px;
font-size: 20px !important;
font-family: “Times New Roman”, Times, serif;
text-align: center;
text-decoration: none;
display: inline-block;
}
.button:hover {
background: #f4511e;
border: 2px solid #black;
color: black;
padding: 20px;
font-size: 20px !important;
font-family: “Times New Roman”, Times, serif;
text-align: center;
text-decoration: none;
display: inline-block;
}
You can even use HTML code. This is useful if you want to use icons on the button.
here is an example.
The i class is the icon
<div class=”wrapper”>
<button id=”gamitutach” onclick=”window.open(‘https://youtu.be/W52HxozyN5g’,’_blank’);” class=”button button-primary gamipress-button”><i class=”fa fa-youtube-play” style=”font-size:16px;color:red”></i>GamiPress Tutorial – Creating an achievement type</button>
</div>
Hope this helps.
