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
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>