Versico Guide

Buttons and Links

Primary Button

                            
.btn {
    font-family: 'Nanum Gothic', sans-serif;
    font-size: 18px;
    font-weight: 700;
    border-radius: 4px;
    border: none;
    display: inline-block;
    text-align: center;
    line-height: 1;
    padding: 15px 57px 17px;
    transition: all .15s ease-in-out;
}
.btn-primary {
    color: #fff;
    background-color: #fcc62b; 
}
.btn-primary:hover {
    background-color: #ffa800;
    border-color: #ffa800;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus, 
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    background-color: #ffa800;
    box-shadow: none;
}
                            
                        

Primary Button Disabled

CTA Button
                            
.btn-primary.disabled, 
.btn-primary:disabled {
    background-color: #f2f2f2;
    cursor: default;
}   
                            
                        

Link (Secondary CTA)

Secondary CTA
                            
.secondaryCTA,
.secondaryCTA:visited {
    font-family: 'Nanum Gothic', sans-serif;
    color: #fcc62b; 
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    display: inline-block;
}
.secondaryCTA:hover {
    color: #ffa800;
    text-decoration: underline;
    text-underline-offset: 6px;
}
.secondaryCTA a:active {
    color: #ffa800;
    text-decoration: none;
}
                            
                        
                            
a, a:link, a:visited {
    color: #fcc62b; 
    font-size: 15.993px;
    text-decoration: none;    
}
a:hover {
    color: #ffa800;
    text-decoration: underline;
    text-underline-offset: 5px;
}
a:active {
    color: #ffa800;
    text-decoration: none;
}