How to Use the Code Block to Create a Button with a Gradient Background

There are so many amazing things you can do with code blocks in Squarespace. Here’s a breakdown of how to get a button with a gradient background.

The desired effect:

Learn More

The code that got us there:

<!--By Sealevel Agency-->
<div style="text-align:center">
     <a href="https://sealevelagency.com" target="_blank">
        <span style="font-family:'playfair display';
               background-image:linear-gradient(to right, #ffdd15, #f55536);
               font-size:1em;
               line-height:20px;
               border:1px solid black;
               padding:15px 40px;
               text-decoration:none;
               box-shadow:-3px 3px #000;
               color:#000;
               font-style:italic;">
          Learn More
        </span>
    </a>
</div>

The breakdown of each element:

1. <div style=”text-align:center”>

   A div, or division, is a “block” element. That means it’s going to contain everything that lives inside an entire block. So for the purposes of this example, it makes the entire button in the center of the page. You could use <div style=”text-align:right”>, <div style=”text-align:left”>, and <div style=”text-align:justify”> for any other your buttons or other block elements.

2. <a href=”https://yourlink.com”>

   This is where you want to button to go when you click on it. It’s simply the page inside or outside your website you want to button to go to when the viewer clicks on it.

3. target=”_blank”

   This sits inside the <a href> element and tells the browser to open a new tab when the link is clicked. If you don’t want it to open a new tab, simply leave it out of the code.

4. <span style=”…..”>

   <span>, as opposed to <div>, is an inline element. Where a <div> will occupy everything that lives inside the block, a <span> will only impact the styles of inline elements. Let’s say you live in a suburb of a large city. You petition your local government to add a stop sign at the end of your street and a stop sign is implemented. That doesn’t impact the laws of the greater city area, only your neighborhood.

   Within the <span> element is where we’re going to add all the other styles of the button like fonts, background color, font-size, underlines or italics, etc.

   – font-family:’your brand font go inside the quotations’; (all new styles are separated by a semi-colon)

   – background-image:linear-gradient(to right, #hexcode1, #hexcode2); A hex code is a six-digit code that’s created determining how much of the primary colors are mixed to create a new shade. You can find color palettes with respective hex codes at coolors.co/app.

   – There are a lot of different styles you can create with linear-gradient. In this example, the yellow fades into the red. However, you can create a solid line by adding ‘50%’ at the end of each hex code. Shown here:

Learn More

background-image:linear-gradient(to bottom right, #ffdd15 50%, #fff 50%);

– border:1px solid black; this is the outline of the box. 1px determines the thickness of the outline, solid can be changed to dotted or dashed, among others.

– padding:15px 40px; Takes the words away from the edges of the square and into the center and adds padding to the width and height.

– text-decoration:none; Because the words are a link, there’s automatically a blue underline added to it. This removes that style.

– box-shadow:-3px 3px #000; this provides that box underneath the square to make it look raised. The numbers in front of each ‘px’ determines the weight and direction of the box. The #000 is the hex code for the color black.

– You’ll close your <span> with a closing “ and >. After the last > is where you’ll add your text. You can change that to anything you want. Click Here, Contact Us, Read More.

     font-style:italic;">
          Learn More
        </span>
     </a>
  </div>

---