Versico Logo
Search Log In
Find A Rep Where to Buy

Versico Guide

Buttons and Links

Primary CTA Button

                            
.btn {
    font-family: 'Nanum Gothic', sans-serif;
    border-radius: 3px;
    font-weight: 800;
    font-style: normal;
}
.btn-primary {
    color: #fff;
    background-color: #fcc52b;
    border-color: #fcc52b;
    font-size: 16px;
    line-height: 1;
    padding: 12px 35px;
}
.btn-primary:hover {
    background-color: #ffa800;
    border-color: #ffa800;
}
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active:focus {
    background-color: #ffa800;
    box-shadow: 0 0 0 0.2rem rgba(255, 168, 0, 0.5);
    border-color: #ffa800;
}
                            
                        

Primary CTA Button Disabled

                            
.btn-primary.disabled, 
.btn-primary:disabled {
    color: #666;
    background-color: #c6c6c6;
    border-color: #c6c6c6;
}   
                            
                        

Link (Secondary CTA)

Secondary CTA

                            
.secondaryCTA a {
    font-family: 'Nanum Gothic', sans-serif;
    color: #fcc52b;
    font-size: 18.5px;
    font-weight: 700;
    font-style: normal;
    line-height: 2.27;
    text-decoration: none;
}
.secondaryCTA a:hover {
    text-decoration: underline;
}
.secondaryCTA a:active {
    text-decoration: none;
    color: #ffa800;
}
.right-arrow:after {
    display: inline-block;
    font-family: "Font Awesome 7 Free";
    content: '\f105';
    padding-left: 5px;
    color: #ffa800;
    font-size: 16px;
}
.secondaryCTA a:active.right-arrow:after {
    color: #fcc52b;
}
                            
                        
                            
a, a:link, a:visited {
    color: #fcc52b;
    font-weight: 400;
    text-decoration: none;    
}
a:hover {
    text-decoration: underline;
}
a:active {
    color: #ffa800;
    text-decoration: none;
}