Author Sam-K
2016
5
Premium
Rank 441

Hello WA Fans

It is Sam-K in here.

In this training I would like to teach you how to make beautiful link buttons for your site. No plugins. AND, how to make these buttons work in AMP pages for free.

This works on Any Theme.

Excuse my broken English in the video- That means I know another language-. The Information in the video are very beneficial for any one who wants to beautify his site and make beautiful link buttons .

Here are the codes I referred to in the video.

1- Put this Code in the " Additional CSS "of your theme.

/* ==========Buttons ===========

*/

.Sambutton {

background-color: #003; /* Green */

border:none;

color:#fff;

text-decoration: none;

display: inline-block;

font-size: 18px;

-webkit-transition-duration: 0.4s; /* Safari */

transition-duration: 0.4s;

cursor:pointer;

}

.Sambutton1 {

border: 2px solid #008CBA;

padding: 2px 20px 2px 20px

}

.Sambutton1:hover {

background-color: #ff0;

}

/* ========================== */

2- Put this code in your page text editor, in the place where you want the button to appear.

Note: Only put the part between <a> and </a> without the <code > tag.

<code> <a title="NFL Breast Cancer Hats" class="Sambutton Sambutton1" href="https://breastcancerhat.com/breast-cancer-hat"> PICK YOUR TEAM NOW </a></code>


Of course, you can change the title, link, colors, fonts and other button properties as you want.

You can just copy the code in step 1 and put it in your AMP additional CSS to get the button work in your amp page as well.

Kindly, make a like to the training.

Enjoy.

Join the Discussion
Write something…
Recent messages
MariahP Premium
Thank you for this! I am a complete novice when it comes to code, but I already have about 5 plugins and I don't want to use anymore. I was able to follow your directions and create the buttons on my site! Now all I have to do is figure out how to change the colors.
Reply
Sam-K Premium
Easy , in the customize menu , where you see # followed by numbers , this is a color code , you can go to https://en.wikipedia.org/wiki/Web_colors , choose color code and copy and past it
.
Reply
Sam-K Premium
These are the codes that you can change their color:

.Sambutton
background-color: #003; /* Green */

.Sambutton1
color:#fff;

background-color: #ff0;


Also in the webpage text editor , you can change the font color , just look for the word color in the code
Reply
MariahP Premium
Thank you!!!
Reply
Sam-K Premium
you welcome ,
and be careful do not delete the commas after the code , just change the # and numbers , and keep the semicolon ( ; ) in its place after the code number
Reply
Top