Login button markup

Available in Classic and VPC

This section describes how to place a login button using the markup provided below if your application does not have its own design guide.

Download symbol

Before placing the login button using the markup, download the following symbol image file.

• Download symbol: icon-ncloud-symbol.zip

Place the login button

The markup differs depending on the shape of the login button when placing it. Select and use one of the following 3 types that can be used depending on the page implementation environment.

• Default login button
• Short type login button
• Symbolic login button

Default login button

The default login button is the most basic button type, and is divided into light and color versions that can be used depending on the color theme.

Write CSS

The following describes how to create the login button and symbol in CSS:
Enter the saved path of the symbol image in imagePath.

• Light version

.button-basic-wrapper {
    position: relative;
    display: inline-flex;    
    align-items: center;        
    border-radius: 4px;
    background-color: #f9f9f9;
    font-size: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Roboto',-apple-system,BlinkMacSystemFont,'Malgun Gothic','Malgun Gothic',helvetica,'Apple SD Gothic Neo',sans-serif;
    cursor: pointer;
}
.button-basic-wrapper.lang-ja {
    font-family: 'Roboto',-apple-system,BlinkMacSystemFont,'メイリオ','Meiryo','Yu Gothic','Hiragino Kaku Gothic Pro','Hiragino Sans',sans-serif;
}
.button-basic-wrapper.lang-zh {
    font-family: 'Roboto',-apple-system,BlinkMacSystemFont,'Microsoft Yahei',sans-serif;
}
.button-contents .button-text{
    display: inline-block;
    vertical-align: top;
}
.button-basic-wrapper::after {
    content: '';
    position: absolute;
    top:0;
    left:0;
    right: 0;
    bottom: 0;
    border: 1px solid #aaa;
    border-radius: 4px;
}
.button-basic-wrapper:hover {
    background: #f0f0f0;
}
.button-basic-wrapper:hover::after {
    border-color: #222;
}
.button-basic-wrapper:hover .button-icon-wrap {
    border-color: #222;
}
.button-basic-wrapper .button-icon-wrap {
    height: 44px;
    line-height: 44px;
    padding: 0 6px 0 10px;
    border-right: 1px solid #aaa;
    background-color: #fff;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.button-contents {
    font-size: 16px;
    line-height: 44px;
    color: #222;
    font-weight: bold;
    padding: 0 31px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.button-contents.button-small-type {
    padding: 0 22px;
}
.button-basic-wrapper .buttoniconimage {
    background: url(imagePath/icon-ncloud-symbol-light.png) no-repeat;
    background-size: 28px 14px;
    display: inline-block;
    vertical-align: middle;
    width: 28px;
    height: 14px;
}

• Color version

.button-basic-wrapper.color-type {
    position: relative;
    background-image: linear-gradient(98deg, #00e25d, #00d1c8);
}
.button-basic-wrapper.color-type:after {
    border-color: transparent;
}
.button-basic-wrapper.color-type:hover .button-icon-wrap ,.button-basic-wrapper.color-type:hover .button-contents {       
    background-color: rgba(0, 0, 0, 0.15);           
}
.button-basic-wrapper.color-type .button-icon-wrap {
    position: relative;
    background-color: transparent;
    border-color: rgba(0, 0, 0, 0.15);
}
.button-basic-wrapper.color-type .button-contents {
    position: relative;
    color: #fff;
}
.button-basic-wrapper.color-type .buttoniconimage {
    background: url(imagePath/icon-ncloud-symbol-color.png) no-repeat;
    background-size: 28px 14px;    
}

Write HTML

The following describes how to create the login button and symbol in HTML:

• Light version

<div class="button-basic-wrapper">
  <div class="button-icon-wrap">
    <span class="buttoniconimage"></span>
  </div>
  <div class="button-contents">
    <span class="button-text">NAVER Cloud Platform login</span>
  </div>
</div>

• Color version

<div class="button-basic-wrapper color-type">
  <div class="button-icon-wrap">
    <span class="buttoniconimage"></span>
  </div>
  <div class="button-contents">
    <span class="button-text">NAVER Cloud Platform login</span>
  </div>
</div>

Short type login button

The short type login button is a button format that can be used when the area for placing the button is limited, and it comes in two versions, a light version and color version, that can be used depending on the color theme.

Write CSS

The following describes how to create the login button and symbol in CSS:
Enter the saved path of the symbol image in imagePath.

• Light version

.button-basic-wrapper {
    position: relative;
    display: inline-flex;    
    align-items: center;        
    border-radius: 4px;
    background-color: #f9f9f9;
    font-size: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Roboto',-apple-system,BlinkMacSystemFont,'Malgun Gothic','Malgun Gothic',helvetica,'Apple SD Gothic Neo',sans-serif;
    cursor: pointer;
}
.button-basic-wrapper.lang-ja {
    font-family: 'Roboto',-apple-system,BlinkMacSystemFont,'メイリオ','Meiryo','Yu Gothic','Hiragino Kaku Gothic Pro','Hiragino Sans',sans-serif;
}
.button-basic-wrapper.lang-zh {
    font-family: 'Roboto',-apple-system,BlinkMacSystemFont,'Microsoft Yahei',sans-serif;
}
.button-contents .button-text{
    display: inline-block;
    vertical-align: top;
}
.button-basic-wrapper::after {
    content: '';
    position: absolute;
    top:0;
    left:0;
    right: 0;
    bottom: 0;
    border: 1px solid #aaa;
    border-radius: 4px;
}
.button-basic-wrapper:hover {
    background: #f0f0f0;
}
.button-basic-wrapper:hover::after {
    border-color: #222;
}
.button-basic-wrapper:hover .button-icon-wrap {
    border-color: #222;
}
.button-basic-wrapper .button-icon-wrap {
    height: 44px;
    line-height: 44px;
    padding: 0 6px 0 10px;
    border-right: 1px solid #aaa;
    background-color: #fff;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.button-contents {
    font-size: 16px;
    line-height: 44px;
    color: #222;
    font-weight: bold;
    padding: 0 31px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.button-contents.button-small-type {
    padding: 0 22px;
}
.button-basic-wrapper .buttoniconimage {
    background: url(imagePath/icon-ncloud-symbol-light.png) no-repeat;
    background-size: 28px 14px;
    display: inline-block;
    vertical-align: middle;
    width: 28px;
    height: 14px;
}

• Color version

.button-basic-wrapper.color-type {
    position: relative;
    background-image: linear-gradient(98deg, #00e25d, #00d1c8);
}
.button-basic-wrapper.color-type:after {
    border-color: transparent;
}
.button-basic-wrapper.color-type:hover .button-icon-wrap ,.button-basic-wrapper.color-type:hover .button-contents {       
    background-color: rgba(0, 0, 0, 0.15);           
}
.button-basic-wrapper.color-type .button-icon-wrap {
    position: relative;
    background-color: transparent;
    border-color: rgba(0, 0, 0, 0.15);
}
.button-basic-wrapper.color-type .button-contents {
    position: relative;
    color: #fff;
}
.button-basic-wrapper.color-type .buttoniconimage {
    background: url(imagePath/icon-ncloud-symbol-color.png) no-repeat;
    background-size: 28px 14px;    
}

Write HTML

The following describes how to create the login button and symbol in HTML:

• Light version

<div class="button-basic-wrapper">
  <div class="button-icon-wrap">
    <span class="buttoniconimage"></span>
  </div>
  <div class="button-contents button-small-type">
    <span class="button-text">Log in with Ncloud</span>
  </div>
</div>

• Color version

<div class="button-basic-wrapper color-type">
  <div class="button-icon-wrap">
    <span class="buttoniconimage"></span>
  </div>
  <div class="button-contents button-small-type">
    <span class="button-text">Log in with Ncloud</span>
  </div>
</div>

Symbolic login button

The symbolic login button is a button format consisting only of a symbol, and is divided into light and color versions that can be used depending on the color theme.

Write CSS

The following describes how to create the login button and symbol in CSS:
Enter the saved path of the symbol image in imagePath.

• Light version

.button-symbol-wrapper {
    position: relative;  
    display: inline-flex;    
    align-items: center;        
    font-size: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Roboto', sans-serif;
    cursor: pointer;
}
.button-symbol-wrapper:after {
    content: '';
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid #aaa;
    border-radius: 50%;
}
.button-symbol-wrapper:hover::after {
    border-color: #222;
}
.button-symbol-wrapper:hover .button-icon-wrap {
    background-color: #f0f0f0;
}
.button-symbol-wrapper .button-icon-wrap {
    position: relative;
    height: 44px;
    line-height: 44px;      
    border-radius: 50%;
    padding: 0 7px 0 9px;
}
.button-symbol-wrapper .buttoniconimage {
    background: url(imagePath/icon-ncloud-symbol-light.png) no-repeat;
    background-size: 28px 14px;  
    display: inline-block;
    vertical-align: middle; 
    width: 28px;
    height: 14px;
}

• Color version

.button-symbol-wrapper.color-type{
    background-image: linear-gradient(98deg, #00e25d, #00d1c8);
    border-radius: 50%;
}
.button-symbol-wrapper.color-type::after{
    border: 0;
}

.button-symbol-wrapper.color-type:hover .button-icon-wrap {
    background-color: rgba(0, 0, 0, 0.15);    
}

.button-symbol-wrapper.color-type .button-contents {
    color: #fff;
}

.button-symbol-wrapper.color-type .buttoniconimage {      
    background: url(imagePath/icon-ncloud-symbol-color.png) no-repeat;
    background-size: 28px 14px;   
}

Write HTML

The following describes how to create the login button and symbol in HTML:

• Light version

<div class="button-symbol-wrapper">
  <div class="button-icon-wrap">
    <span class="buttoniconimage"></span>
  </div>
</div>

• Color version

<div class="button-symbol-wrapper color-type">
  <div class="button-icon-wrap">
    <span class="buttoniconimage"></span>
  </div>    
</div>