Buttons

What is it?

Buttons are widely used in email campaigns. The Cogentro button is built to be flexible and robust. It adapts to the size of the text content it holds. The Button Box is the container of the button. The Button text and link is the hyperlink and button label.

To insert a button, paste the html below into your chosen container/ <td> element. Edit the text, link and styles to make it your own.


<!-- Button -->
<table border="0" cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <!-- Button Box -->
            <td bgcolor="#345CFF" align="left" class="btn_box btn_box_rounded">
                <!-- Button text and link -->
                <a href="http://cogentro.com" target="_blank" class="btn_text"><font color="#ffffff">Rounded Button</font></a>
            </td>
        </tr>
    </tbody>
</table>
<!-- Button End--> 
                        

/*=== Buttons ===*/
.btn_box{padding: 12px 18px; line-height: 15px; background-color: #345CFF;}
.btn_box_rounded{border-radius: 3px;}
.btn_text{font-size: 15px; color:#ffffff !important; font-weight:500; text-decoration:none;}
.btn_box_white{padding: 12px 18px; line-height: 15px; background-color: #ffffff;}
.btn_text_dark{font-size: 15px; color:#345CFF !important; font-weight:500; text-decoration:none;}


/*=== Buttons Hover ===*/
.btn_box, .btn_text {transition: all 100ms ease-in;}
.btn_box:hover, .btn_text:hover {background: #1542FC !important;}
.btn_box_white:hover, .btn_text_dark:hover {background: #DFE5FF !important;}