PubWriter Sandbox Tutorial

<div class="sandbox">

# Cool Buttons Get Clicks!

<p align='center'><a class="btn btn-outline-dark btn-lg"
    href="https://www.perplexity.ai/search/Tell-me-about-EENI9UtLS4miQHRR1yHhVw"><img
      src="https://assets.codepen.io/769788/perplexity.png?width=156&height=156&format=auto" style="width:50px"><b>
      Perplexity</b></a></p>
      
<center>

<div id="rotator"><a class="btn btn-outline-success btn-lg" href="https://read.pubwriter.com/ai"><img class="fan" src="https://assets.codepen.io/769788/chatgpt.png" style="width:50px"><b> ChatGPT</b></a></div>
<claude>
<a class="btn btn-outline-dark btn-lg" href="https://read.pubwriter.com/ai"><img src="https://assets.codepen.io/769788/claude.svg" style="width:50px"><b> Claude</b></a>

<br>

<a href="https://AuthorDock.com" class="btn btn-custom btn-lg"><span class="fa fa-ship fa-4x"></span> AuthorDock</a>

<a href="https://AuthorDock.com" class="btn btn-outline-info btn-lg"><span class="fa fa-ship fa-4x"></span> AuthorDock</a>

<div id="rotator"><a class="btn btn-outline-success btn-lg" href="https://www.authordock.com"><img class="fan" src="https://pubwriter.net/images/authordock1.png" style="width:50px" ><b> AuthorDock</b></a></div>
</center>

Add your own artwork

<p align='center'>
<a class='btn btn-warning' href='https://www.amazon.com/dp/B08M11Y7HS'><img src='https://assets.codepen.io/769788/USD.png' style='width:40px'>  Amazon USA</a>  <a class='btn btn-primary' href='https://www.amazon.co.uk/dp/B08M11Y7HS'><img src='https://assets.codepen.io/769788/GBP.png' style='width:40px'>  Amazon UK</a>  <a class='btn btn-secondary' href='https://www.amazon.de/dp/B08M11Y7HS'><img src='https://assets.codepen.io/769788/GER.png' style='width:40px'>  Amazon DE</a>  <a class='btn btn-success' href='https://www.amazon.fr/dp/B08M11Y7HS'><img src='https://assets.codepen.io/769788/FR.png' style='width:40px'>  Amazon FR</a>   <a class='btn btn-danger' href='https://www.amazon.es/dp/B08M11Y7HS'><img src='https://assets.codepen.io/769788/sp.png' style='width:40px'>  Amazon ES</a>  <a class='btn btn-info' href='https://www.amazon.it/dp/B08M11Y7HS'><img src='https://assets.codepen.io/769788/it.png' style='width:40px'>  Amazon IT</a>  <a class='btn btn-light' href='https://www.amazon.nl/dp/B08M11Y7HS'><img src='https://assets.codepen.io/769788/nl.png' style='width:40px'>  Amazon NL</a>  <a class='btn btn-dark' href='https://www.amazon.co.jp/dp/B08M11Y7HS'><img src='https://assets.codepen.io/769788/JPY.png' style='width:40px'>  Amazon JP</a>  <a class='btn btn-warning' href='https://www.amazon.com.br/dp/B08M11Y7HS'><img src='https://assets.codepen.io/769788/BRL.png' style='width:40px'>  Amazon BR</a>  <a class='btn btn-primary' href='https://www.amazon.ca/dp/B08M11Y7HS'><img src='https://assets.codepen.io/769788/CAD.png' style='width:40px'>  Amazon CA</a>  <a class='btn btn-secondary' href='https://www.amazon.com.mx/dp/B08M11Y7HS'><img src='https://assets.codepen.io/769788/MXN.png' style='width:40px'>  Amazon MX</a> <a class='btn btn-light' href='https://www.amazon.com.au/dp/B08M11Y7HS'><img src='https://assets.codepen.io/769788/AUS.png' style='width:40px'>  Amazon AU</a>  <a class='btn btn-dark' href='https://www.amazon.in/dp/B08M11Y7HS'><img src='https://assets.codepen.io/769788/INR.png' style='width:40px'>  Amazon IN</a>
</p>

You have 9 types of buttons:

<a href="#" class="btn btn-primary"><span class="fas fa-book-reader fa-lg"></span> Button Text <span class="fas fa-book-reader fa-lg"></span></a>

![](https://pubwriter.net/images/icons/mail.svg)

1. <button type="button" class="btn btn-primary"><img src="https://pubwriter.net/images/icons/mail.svg" width=30px color="white" /> Primary</button>
2. <button type="button" class="btn btn-secondary">Secondary</button>
3. <button type="button" class="btn btn-success">Success</button>
4. <button type="button" class="btn btn-danger">Danger</button>
5. <button type="button" class="btn btn-warning">Warning</button>
6. <button type="button" class="btn btn-info">Info</button>
7. <button type="button" class="btn btn-light"><img src="https://pubwriter.net/images/icons/mail.svg" width=30px color="white" />Light</button>
8. <button type="button" class="btn btn-dark">Dark</button>
9. <button type="button" class="btn btn-link">No Color</button>

## Linked Buttons

<a class="btn btn-dark" href="https://read.amazon.com/kp/embed?asin=B08K38Q4RV&preview=newtab&linkCode=kpe&ref_=cm_sw_r_kb_dp_vZdKFbD4J6X5F&tag=paycart-20"><img src="https://pubwriter.net/images/book.svg" style="width:40px" ><b> Free Preview</b></a>

<button type="button" class="btn btn-dark" href="https://read.amazon.com/kp/embed?asin=B08K38Q4RV&preview=newtab&linkCode=kpe&ref_=cm_sw_r_kb_dp_vZdKFbD4J6X5F&tag=paycart-20"><img src="https://pubwriter.net/images/book.svg" width=30px />Preview</button>

### Let's increase the size of the text:

<center><a class="btn btn-outline-success btn-lg" href="https://pubwriter.com" style="font-size: 2rem;"><img src="https://pubwriter.net/images/create.svg"><br>Option 1</a>  <a class="btn btn-outline-success btn-lg" href="https://pubwriter.com" style="font-size: 2rem;"><img src="https://pubwriter.net/images/create.svg"><br>Option 2</a>  <a class="btn btn-outline-success btn-lg" href="https://pubwriter.com" style="font-size: 2rem;"><img src="https://pubwriter.net/images/create.svg"><br>Option 3</a></center>

## Icons & Art on Buttons

<center>
<div id="rotator"><a class="btn btn-outline-success btn-lg" href="https://pubwriter.com"><img class="fan" src="https://pubwriter.net/images/create.svg"><br><b>Buttons</b><br> for PubWriter</a></div>
</center>

### Option 1 - Bootstrap Buttons

<center> <a href="https://aerbook.com/maker/productcard-5793582-7892.html" class="btn btn-success btn-lg"><span class="fas fa-book-reader fa-lg"></span> $19.95 Hardcover</a> </center>

See <https://pubwriter.net/icons> for the full list!

If you have [the icon](https://read.pubwriter.com/fancy) that you can copy & paste, here's a simple button:

<center><a href="macTools" class="btn btn-outline-success"> Mac Tools</a></center>

## Using an image on a button (note that you can change the size?):

<p align="center"><a href="#1" class="btn btn-outline-success">  <strong style="padding: 30px"><img src="https://pubwriter.net/images/icons/octicons/circuit-board.svg" height="100" width="100"></strong><br> PubWriter</a></p>

<p align="center"><a href="https://codepen.io/pubwriter/live/45ccd8096763c002020351ceda79c0c7" class="btn btn-outline-success"><img src="https://pubwriter.net/images/logos/atom.svg" height="25""></strong> Atom Snippet</a></p>

***

## Social Media Footer Buttons
<div class="flex-center">

<a href="https://www.facebook.com/skippersbrew805" class="button">
<img src="https://pubwriter.net/images/icons/facebookRound.svg" height="50" width="50"/>
</a>

<a href="https://www.yelp.com/biz/skippers-brew-morro-bay" class="button">
<img src="https://pubwriter.net/images/icons/yelpRound.svg" height="50" width="50"/>
</a>

<a href="https://www.instagram.com/skippers.brew/" class="button">
<img src="https://pubwriter.net/images/icons/instagramRound.svg" height="50" width="50"/>
</a>

<a href="https://twitter.com/skippers_brew" class="button">
<img src="https://pubwriter.net/images/icons/twitterRound.svg" height="50" width="50"/>
</a>

<a href="https://www.facebook.com/Bill-Froehlich-179820578726345/" class="button">
<img src="https://pubwriter.net/images/icons/facebook.svg" height="50" width="50"/>
</a>

<a href="https://www.linkedin.com/in/bill-froehlich-4b458212/" class="button">
<img src="https://pubwriter.net/images/icons/linkedin.svg" height="50" width="50"/>
</a>

<a href="https://twitter.com/ithacafilms" class="button">
<img src="https://pubwriter.net/images/icons/twitter.svg" height="50" width="50"/>
</a>
</div>

<hr>

## More Footer Buttons

## Footer Button Builder

Using the code below, you can drop in any image!

***

You can also create your own buttons with a little HTML:

### Inline CSS
<a href="#"><strong style="padding:20px;background-color:yellow">DIY Button</strong></a>

### External CSS

Create your own button classes!

<button class="myButton">DIY Button using a button class</button>

<style>

.myButton {
font: inherit;
border: 1px solid #521751;
background: green;
color: white;
padding: 3px 10px;
cursor: pointer;
}

.myButton:active,
.myButton:hover {
 background: #722a71;
}

.myButton:focus {
outline: none;
}

</style>

> Buttons vary between CSS Frameworks. You may notice buttons look slightly different depending on the CSS Framework you are using (Foundation, Bootstrap, Skeleton, etc). But it depends on the button class name you use (they don't all share the same button class names).

***

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

As you might be able to tell, the CSS is what defines the color of the buttons (and the text on the button itself). In the case of light/dark buttons, you have to consider the color of the text and the icon.

We can address the issue of light/dark text with the following CSS:

.btn-light, .btn-default {
  	color: black !important;
      }
      a.btn-light, .btn-default {
        	color: white !important;
      }

As you can see, whether you have a 'dark' theme or 'light' theme will dictate the color of the buttons and the text.

***

Basic button, no icon:

<a href="#" class="btn btn-default btn-lg">Black Button</a>

Replace the `#` to specify where the button links to (href="URL").

Buttons can be created in 3 sizes are configured using the switches: `btn-lg` and `btn-sm` (or default size if you don't use a switch):

<a href="#" class="btn btn-primary btn-lg">Large Button</a>

<a href="#" class="btn btn-primary">Default Button</a>

<a href="#" class="btn btn-sm btn-primary">Small Button</a>

## 1. default
<a href="#" class="btn btn-default btn-lg"><span class="fa fa-gift"></span> Black Button</a> <a href="#" class="btn btn-default"><span class="fa fa-gift"></span> Black Button</a> <a href="#" class="btn btn-default btn-sm"><span class="fa fa-gift"></span> Black Button</a>

## 2. primary
<a href="#" class="btn btn-primary btn-lg"><span class="fa fa-envelope"></span> Blue Button</a> <a href="#" class="btn btn-primary">Blue Button <span class="fa fa-envelope"></span></span></a> <a href="#" class="btn btn-primary btn-sm"><span class="fa fa-envelope"></span> Blue Button</span></a>

## 3. info
<a href="#" class="btn btn-info btn-lg"><span class="fa fa-globe"></span> Turquoise Button</a>

## 4. success
<a href="#" class="btn btn-success btn-lg"><span class="fa fa-thumbs-up"></span> Green Button</a>

## 5. warning
<a href="#" class="btn btn-warning btn-lg"><span class="fa fa-mobile"></span> Yellow Button</a>

## 6. danger
<a href="#" class="btn btn-danger btn-lg"><span class="fa fa-credit-card"></span> Red Button</a>

## 7. link
<a href="#" class="btn btn-link btn-lg"><span class="fa fa-yelp"></span> Colorless Button</a>

I recommend using the link button when use an image as a button:
<a href="https://eduncan.net/preview" class="btn btn-link btn-lg"><img src="https://eduncan.net/img/pigeonCover.jpg" height="200" width=""/></a>

> See a live example on [Dan Logan's site](https://danielloganauthor.com/).

Notice how easy it is to reduce the size?
<a href="https://eduncan.net/preview" class="btn btn-link btn-lg"><img src="https://eduncan.net/img/pigeonCover.jpg" height="100"></a>

Or increase the size?
<a href="https://eduncan.net/preview" class="btn btn-link btn-lg"><img src="https://eduncan.net/img/pigeonCover.jpg" height="300"></a>

**[Hundreds of icons](http://pubwriter.net/icons.md) are available for page & your buttons!**

## Going Deeper

You can also turn SVGs into buttons, allowing you to customize the colors. If you're ready to dive deeper into the amazing world of SVGs, it's in [Tutorial #9](9).