Create Custom Buttons

Word Count: 268
  • Post category:Codings
  • Post last modified:2022-02-04

Introduction

This article describes 2 methods for creating buttons on web pages.

  • Method 1 is applicable in all general situations
  • Method 2 is for the WP Bridge Theme only.

The last section covers the methods to center the button on the page.

Method 1: Custom HTML and CSS

<!-- Code sample   -->
<div class="cu-btn">
    <a href="#cu-contact-us" target="_self">
        <div class="cu-btn-244">CONTACT US</div>
    </a>
</div>

<style>

.cu-btn {
    box-sizing: border-box;
    width: fit-content;
    padding: 0;
    margin: 0;
    font-family: Roboto, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
}

.cu-btn-244 {
    border-width: 1px;
    width: 244px;
    height: 38px;
    border-radius: 19px;
    line-height: 38px; /* equal to element height   */
    color: #2E3174;
    border: 1px solid #00E8E2;
    background-color: #fff;
}

.cu-btn-244:hover {
    background-color: #00E8E2;
    color: #ffffff;
}

</style>

Method 2: Use Qode button V2 (Bridge Theme)

The advantage of using this built-in element is non-technical person can easily change the button text and URL through the theme page builder. 

Settings = type: Solid/Default; class: cu-btn-(w);
                Input other values for text styling.
 
Save the setting as Element Template to save input work for other buttons.
let (w) = overall width of button in px;
        (h) = overall height of button in px;
        (b) = border width of button in px;

CSS
        .cu-btn2-(w) {
            border: (b)px solid #000 !important;
            padding:0;
            margin: 0;
            max-width: (w)px;
            width: 100%;
            height: (h)px;
            line-height: (h)px;
            border-radius: (h/2)-bpx;
            text-align: center;
        }

Center the button on the page

Read these reference:

Tags: , ,