BUP! Documentation

How to install?

Install the Fonts

Install the CSS

Have fun with these buttons
using super-easy shortcodes

Fonts Installation


<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet' type='text/css'>
<script src="https://use.fontawesome.com/759728aeeb.js"></script>

Copy & paste this code on your website's
code between the tags <head> and </head>

CSS Installation

You can do this in two different ways: (Don't do both, please)

The first way:
Copy & paste the file 'bupstyles.css' into your website's folder & then copy & paste the following code on your website's template code between the tags <head> and </head>


<link rel='stylesheet' type='text/css' href='bupstyles.css'>

The second way:
Open the file 'bupstyles.css' with the notepad & then copy all the code (Ctrl+A on Windows or Command+A on Mac) & paste it on your website's template code between the tags <style> and </style>

Buttons Shortcodes

Bottom Border Style

<a class='buttonwithborder' href='#'>
	<p>Hover Me</p>
	<div class='border' id='red'></div>
</a>

Hover Me

Replace the # with the URL, the blue text with your visible text, & choose the button color replacing the word 'red' with blue, lightblue, green, yellow, purple, orange or grey.

Full Border Style

<a class='buttonwithborder2' href='#'>
	<div class='bordertop' id='red'></div>
	<div class='borderleft' id='red'></div>
	<p class='poppins'>Hover Me</p>
	<div class='borderright' id='red'></div>
	<div class='borderbot' id='red'></div>
</a>

Hover Me

Replace the # with the URL, the blue text with your visible text, & choose the button color replacing the words 'red' with blue, lightblue, green, yellow, purple, orange or grey.

Rotation Style

<a class='letterrotate' id='red1' href='#'>
	<p id='first'>H</p><p>o</p><p>v</p><p>e</p><p>r</p><p id='newword'>M</p><p>e</p>
</a>

Replace the # with the URL, & choose the button color replacing the word 'red1' with blue1, lightblue1, green1, yellow1, purple1, orange1 or grey1. If you need to add more letters, just add them individually with the <p> </p>. The second word's first letter must have the id='newword'

I Want Some Color! Style

<a id='color' class='red' href='#'>
	<p>Hover Me</p>
</a>

Hover Me

Replace the # with the URL, the blue text with your visible text, & choose the button color replacing the word 'red' with blue, lightblue, green, yellow, purple, orange or grey.

Press That Button Style

<a class='pressthat' href='#'>
	<div class='pressme' id='redpress'>
		<p>Hover Me</p>
	</div>
</a>

Hover Me

Replace the # with the URL, the blue text with your visible text, & choose the button color replacing the word 'redpress' with bluepress, lightbluepress, greenpress, yellowpress, purplepress, orangepress or greypress.
If you want to change the top margin and the bottom margin of this button, DON'T DO IT. It works better if you create an invisible div with the necessary height above or below.

Transparent Styles

<a class='transparent' id='one' href='#'>
	<p>Hover Me</p>
</a>

Hover Me

Replace the # with the URL & the blue text with your visible text.

<a class='transparent' id='two' href='#'>
	<p id='first'>H</p><p>o</p><p>v</p><p>e</p><p>r</p><p id='newword'>M</p><p>e</p>
</a>

Each letter must be between the tags <p> & </p>. The second word's first letter must have the id='newword'. If you want a shorter word for your button, you should center it by adding style='margin-left: ...px' (replace the ... with the necessary amount of pixels) inside the <p id='first'>. EXAMPLE: <p id='first' style='margin-left: 10px;'>.

<a class='transparent' id='three' href='#'>
	<p>Hover Me</p>
</a>

Hover Me

Replace the # with the URL & the blue text with your visible text.

<a class='transparent' id='four' href='#'>
	<p id='firstword'>Hover</p><p id='secondword'>Me</p>
</a>

Hover

Replace the # with the URL & the blue text with your visible text. The 1st word must have the id='firstword' and 2nd word must have the id='secondword'

<a class='transparent' id='five' href='#'>
	<p>Hover Me</p>
</a>

Hover Me

Replace the # with the URL & the blue text with your visible text.

<a class='transparent' id='six' href='#'>
	<p>Hover Me</p>
</a>

Hover Me

Replace the # with the URL & the blue text with your visible text.

<a class='transparent' id='seven' href='#'>
	<p id='firstwrd'>Hover</p> <p id='secondwrd'>Me</p>
	<p id='thirdwrd'>Please!</p>
</a>

Hover

Please!

Replace the # with the URL & the blue text with your visible text. First word must have the id='firstwrd', second word must have the id='secondwrd' & the third word must have the id='thirdwrd'

<a class='transparent' id='eight' href='#'>
	<p>Hover Me</p>
	<div class='line'></div>
</a>

Hover Me

Replace the # with the URL & the blue text with your visible text.

Hide and Seek Style

<a class='hidenseek' href='#'>
	<p id='firstword'>Hover</p><p id='secondword'>Me</p> 
</a>

Hover

Replace the # with the URL & the blue text with your visible text. The 1st word must have the id='firstword' and the 2nd word must have the id='secondword'.

<a class='hidenseek' id='red' href='#'>
	<p id='firstword'>Hover</p><p id='secondword'>Me</p>
</a>

Hover

If you want a shorter word or just one word for your button, you should center it by adding style='margin-left: ...px' (replace the ... with the necessary amount of pixels) inside the <p id='firstword'>. EXAMPLE: <p id='firstword' style='margin-left: 10px;'>

WTF Does This Mean? Style

<div class='buttonwtf'>
	<div class='wtf' id='red'>
		<p class='q'>?</p>
	</div>
	<div class='explanation'>
		<p>This is an explanation</p>
	</div>
</div>

This is an explanation

Choose the button color replacing the word 'red' with blue, lightblue, green, yellow, purple, orange or grey. It is possible to change the text & the '?', just replace it with another icon or letter or whatever you want.

Cool Download Styles

<a class='download1' id='red' href='#'>
	<i id='arrow3' class="fa fa-angle-down fa-2x" aria-hidden="true"></i>
	<i id='arrow4' class="fa fa-angle-down fa-2x" aria-hidden="true"></i>
	<i id='arrow2' class="fa fa-angle-down fa-2x" aria-hidden="true"></i>
	<i id='arrow1' class="fa fa-angle-down fa-2x" aria-hidden="true"></i>
</a>

Replace the # with your URL & choose the button color replacing the word 'red' with blue, lightblue, green, yellow, purple, orange or grey.

<a class='download2' id='red' href='#'>
	<i id='arrow3' class="fa fa-angle-down fa-2x" aria-hidden="true"></i>
	<i id='arrow4' class="fa fa-angle-down fa-2x" aria-hidden="true"></i>
	<i id='arrow2' class="fa fa-angle-down fa-2x" aria-hidden="true"></i>
	<i id='arrow1' class="fa fa-angle-down fa-2x" aria-hidden="true"></i>
</a>

Replace the # with your URL & choose the button color replacing the word 'red' with blue, lightblue, green, yellow, purple, orange or grey.

<a class='download3' id='red' href='#'>
	<i id='arrow3' class="fa fa-angle-down fa-2x" aria-hidden="true"></i>
	<i id='arrow4' class="fa fa-angle-down fa-2x" aria-hidden="true"></i>
	<i id='arrow2' class="fa fa-angle-down fa-2x" aria-hidden="true"></i>
	<i id='arrow1' class="fa fa-angle-down fa-2x" aria-hidden="true"></i>
</a>

Replace the # with your URL & choose the button color replacing the word 'red' with blue, lightblue, green, yellow, purple, orange or grey.

<a class='download4' id='red' href='#'>
	<i id='arrow3' class="fa fa-angle-down fa-2x" aria-hidden="true"></i>
	<i id='arrow4' class="fa fa-angle-down fa-2x" aria-hidden="true"></i>
	<i id='arrow2' class="fa fa-angle-down fa-2x" aria-hidden="true"></i>
	<i id='arrow1' class="fa fa-angle-down fa-2x" aria-hidden="true"></i>
</a>

Replace the # with the URL & choose the button color replacing the word 'red' with blue, lightblue, green, yellow, purple, orange or grey.

<a class='downloadcontainer' href='#'>	
	<div class='download5' id='red'>
		<i id='arrow3' class="fa fa-angle-down fa-2x" aria-hidden="true"></i>
		<i id='arrow4' class="fa fa-angle-down fa-2x" aria-hidden="true"></i>
		<i id='arrow2' class="fa fa-angle-down fa-2x" aria-hidden="true"></i>
		<i id='arrow1' class="fa fa-angle-down fa-2x" aria-hidden="true"></i>
	</div>
	<div class='explanation'>
		<p>File.example</p>
	</div>
</a>

File.example

Replace the # with the URL, the blue text with the file name & choose the button color replacing the word 'red' with blue, lightblue, green, yellow, purple, orange or grey.

<a class='downloadcontainer' href='#'>	
	<div class='download6' id='red'>
		<i id='arrow3' class="fa fa-angle-down fa-2x" aria-hidden="true"></i>
		<i id='arrow4' class="fa fa-angle-down fa-2x" aria-hidden="true"></i>
		<i id='arrow2' class="fa fa-angle-down fa-2x" aria-hidden="true"></i>
		<i id='arrow1' class="fa fa-angle-down fa-2x" aria-hidden="true"></i>
	</div>
	<div class='explanation'>
		<p>File.example</p>
	</div>
</a>

File.example

Replace the # with the URL, the blue text with the file name & choose the button color replacing the word 'red' with blue, lightblue, green, yellow, purple, orange or grey.

<a class='downloadcontainer' href='#'>	
	<div class='download7' id='red'>
		<i id='arrow3' class="fa fa-angle-down fa-2x" aria-hidden="true"></i>
		<i id='arrow4' class="fa fa-angle-down fa-2x" aria-hidden="true"></i>
		<i id='arrow2' class="fa fa-angle-down fa-2x" aria-hidden="true"></i>
		<i id='arrow1' class="fa fa-angle-down fa-2x" aria-hidden="true"></i>
	</div>
	<div class='explanation'>
		<p>File.example</p>
	</div>
</a>

File.example

Replace the # with the URL, the blue text with the file name & choose the button color replacing the word 'red' with blue, lightblue, green, yellow, purple, orange or grey.

<a class='downloadcontainer' href='#'>	
	<div class='download8' id='red'>
		<i id='arrow3' class="fa fa-angle-down fa-2x" aria-hidden="true"></i>
		<i id='arrow4' class="fa fa-angle-down fa-2x" aria-hidden="true"></i>
		<i id='arrow2' class="fa fa-angle-down fa-2x" aria-hidden="true"></i>
		<i id='arrow1' class="fa fa-angle-down fa-2x" aria-hidden="true"></i>
	</div>
	<div class='explanation'>
		<p>File.example</p>
	</div>
</a>

File.example

Replace the # with the URL, the blue text with the file name & choose the button color replacing the word 'red' with blue, lightblue, green, yellow, purple, orange or grey.

Press That Colored Social Style

<a class='socialcontainer' href='#'>
	<div class='presssocials2' id='redpress'>
		<i class="fa fa-youtube-play fa-2x" aria-hidden="true"></i>
	</div>
</a>

Replace the # with the URL & choose the button color replacing the word 'redpress' with bluepress, lightbluepress, greenpress, yellowpress, purplepress, orangepress or greypress.
To change the social icon just replace the green text with one of the following words:

> facebook

> twitter

> google-plus

> flickr

> deviantart

> github

> pinterest

> reddit-alien

> snapchat-ghost

> yelp

> twitch

> codepen

> foursquare

> instagram

> likedin

> tripadvisor

> tumblr-square

> stumbleupon

> vimeo

> vine

> yahoo

> dribbble

> soundcloud

EXAMPLE: <i class="fa fa-tumblr-square fa-2x" aria-hidden="true"></i>

Press That Transparent Social Style

<a class='socialcontainer' href='#'>
	<div class='presssocials'>
		<i class="fa fa-facebook fa-2x" aria-hidden="true"></i>
	</div>
</a>

Replace the # with the URL.
To change the social icon just replace the green text with one of the following words:

> youtube-play

> twitter

> google-plus

> flickr

> deviantart

> github

> pinterest

> reddit-alien

> snapchat-ghost

> yelp

> twitch

> codepen

> foursquare

> instagram

> likedin

> tripadvisor

> tumblr-square

> stumbleupon

> vimeo

> vine

> yahoo

> dribbble

> soundcloud

EXAMPLE: <i class="fa fa-tumblr-square fa-2x" aria-hidden="true"></i>

Transparent + Social Name Style

<a class='socialnames' href='#'>
	<i class="fa fa-facebook fa-2x" aria-hidden="true"></i>
	<p>Facebook</p>
</a>

Facebook

Replace the # with the URL & the blue text with your visible text.
To change the social icon just replace the green text with one of the following words:

> youtube-play

> twitter

> google-plus

> flickr

> deviantart

> github

> pinterest

> reddit-alien

> snapchat-ghost

> yelp

> twitch

> codepen

> foursquare

> instagram

> likedin

> tripadvisor

> tumblr-square

> stumbleupon

> vimeo

> vine

> yahoo

> dribbble

> soundcloud

EXAMPLE: <i class="fa fa-tumblr-square fa-2x" aria-hidden="true"></i>

Colored + Social Name Style

<a class='socialcolored' href='#' id='fb'>
	<i class="fa fa-facebook fa-2x" aria-hidden="true"></i>
	<p>Facebook</p>
</a>

Facebook

Replace the # with the URL & the blue text with your visible text.
To change the social icon just replace the green text with one of the following words, & set the color of the button according to the social network color replacing the orange letters 'fb' with the orange letters in brackets:

> youtube-play (yt)

> twitter (tw)

> google-plus (gp)

> flickr (fk)

> deviantart (da)

> github (gh)

> pinterest (pi)

> reddit-alien (re)

> snapchat-ghost (sc)

> yelp (ye)

> twitch (twi)

> codepen (cp)

> foursquare (fs)

> instagram (ig)

> likedin (li)

> tripadvisor (ta)

> tumblr-square (tb)

> stumbleupon (su)

> vimeo (vi)

> vine (vin)

> yahoo (ya)

> dribbble (db)

> soundcloud (sou)

EXAMPLE:
<a class='socialcolored' href='https://www.tumblr.com' id='tb'>
<i class="fa fa-tumblr-square fa-2x" aria-hidden="true"></i>
<p>Tumblr</p>
</a>

Super Cool Social Style

<a class='supercoolsocial' href='#'>
	<i class="fa fa-twitter fa-2x" aria-hidden="true"></i>
	<div id='colorbox' class='lightbluebox'></div>
</a>

Replace the # with the URL & choose the button color replacing the word 'lightbluebox' with redbox, orangebox, greybox, bluebox, greenbox, purplebox & yellowbox.
To change the social icon just replace the green text with one of the following words:

> youtube-play

> facebook

> google-plus

> flickr

> deviantart

> github

> pinterest

> reddit-alien

> snapchat-ghost

> yelp

> twitch >

> codepen

> foursquare

> instagram

> likedin

> tripadvisor

> tumblr-square

> stumbleupon

> vimeo

> vine

> yahoo

> dribbble

> soundcloud

EXAMPLE:
<a class='supercoolsocial' href='https://www.facebook.com'>
<i class="fa fa-facebook fa-2x" aria-hidden="true"></i>
<div id='colorbox' class='bluebox'></div>
</a>

Super Cool Tool Style

<a class='supercooltool' href='#'>
	<i class="fa fa-gift fa-2x" aria-hidden="true"></i>
	<div id='colorbox' class='purplebox'></div>
</a>

Replace the # with the URL & choose the button color replacing the word 'purplebox' with greenbox, redbox, bluebox, lightbluebox, greybox, yellowbox & orangebox.
To change the tool icon just replace the green text with one of the following words:

> bars

> camera

> cart-plus

> cloud

> comments

> envelope-o

> exclamation

> external-link

> cogs

> hashtag

> heart-o

> lock

> share-alt

> upload

> user

> thumbs-o-up

> search

> clock-o

> bar-chart

> bell

> check

> times

> code

> rss

> gift

> map-marker

> mobile

> sign-in

> home

> history

> wrench

> user-plus

> users

> user-times

> star-o

> rocket

EXAMPLE:
<a class='supercooltool' href='www.example.com/home'>
<i class="fa fa-home fa-2x" aria-hidden="true"></i>
<div id='colorbox' class='orangebox'></div>
</a>

Transparent Tools

<a class='tool' href='#' id='yellowtool'>
	<i class="fa fa-map-marker fa-2x" aria-hidden="true"></i>
</a>

Replace the # with the URL & choose the button color replacing the word 'yellowtool' with greentool, redtool, bluetool, lightbluetool, greytool, purpletool & orangetool.
To change the tool icon just replace the green text with one of the following words:

> bars

> camera

> cart-plus

> cloud

> comments

> envelope-o

> exclamation

> external-link

> cogs

> hashtag

> heart-o

> lock

> share-alt

> upload

> user

> thumbs-o-up

> search

> clock-o

> bar-chart

> bell

> check

> times

> code

> rss

> gift

> map-marker

> mobile

> sign-in

> home

> history

> wrench

> user-plus

> users

> user-times

> star-o

> rocket

EXAMPLE:
<a class='tool' href='www.example.com/rocket' id='purpletool'>
<i class="fa fa-rocket fa-2x" aria-hidden="true"></i>
</a>