Cookie Privacy Preferences

We utilize essential cookies to ensure our website operates effectively and remains secure. Additionally, we'd like to request your permission to use optional cookies. These are intended to enhance your browsing experience by offering personalized content, displaying advertisements that are relevant to you, and helping us to further refine our website.

Choose "Accept all cookies" to agree to the use of both essential and optional cookies. Alternatively, select "Let me see" to customize your preferences.

 
Building Blocks
 
 
sparkles2.png

Add a Gradient Button

 

Like the Custom Button, this code allows a much greater design element to buttons. This version allows you to have buttons which have a gradient slider effect on hover.

 
 
 

See the effect in action

 
Screenshot 2021-07-06 at 13.27.58.png
 
 
 

How to use the Effect

To start with, create a text block.

  1. On the text block editor, click 'Source' and paste in the HTML code.
  2. Click 'Save' and move off of the text block.
  3. Select the text block, and select 'Actions' in the Blocklab header. Then select ' Custom CSS'.
  4. Paste in the CSS code and click 'Save'.
 

HTML

<p><a class="btn btn-grad" href="/pages/about"><span class=text>SW1</span></a></p>

(To change the buttons link, edit the Green section)
(To change the text shown on the button, edit the Red section)

CSS

row .btn-grad {
    background-image: linear-gradient(to right, #FEC223 0%, #be9118 51%, #FEC223 100%);
    width: 100%;
}

(To change the main colour of the button, edit the Green section)
(To change the sliding gradient colour, edit the Red section)