ボタン

ボタン 【j-callToAction】

ボタン1、2、3

<div>
<div class="n j-callToAction">

■ボタンのクラス名
   j-callToAction

<div class="j-calltoaction-wrapper j-calltoaction-align-1">
■ボタンを囲むラッパーのクラス名
   j-calltoaction-wrapper 共通
   j-calltoaction-align-1  ボタン1の場合
   j-calltoaction-align-2  ボタン2の場合

   j-calltoaction-align-3  ボタン3の場合

 

<a class="j-calltoaction-link j-calltoaction-link-style-1" href="url">新しいボタン </a>

■ボタンそのもののクラス名
   j-calltoaction-link 共通
   j-calltoaction-link-style-1 ボタン1

   j-calltoaction-link-style-2 ボタン2

   j-calltoaction-link-style-3 ボタン3


※ボタンの場合、位置や色などの属性は、

 おそらくjavascript側からの指定によってスタイルシートが割り照られるいるもよう。

javascriptに割り当てられている属性

window.regModule("module_callToAction", {"style":"1","align":"1","id":xxxxxxxxxx});

"style":"1", ボタン1~3

"align":"1" 位置関係 1左寄せ、2中央、3右寄せ
"id":xxxxxxxxxx 
j-callToActionに割り当てられたボタンのID(ここでは省略している)

</div>

<script id="cc-m-reg-xxxxxxxxxx">
// <![CDATA[

window.regModule("module_callToAction", {"style":"1","align":"1","id":xxxxxxxxxx});

// ]]>

</script>

</div>

■ ボタン1

.j-calltoaction-align-1 {

    text-align: left;

}

.j-calltoaction-link-style-1 {

    border-radius: 6px;

    font-size: 18px;

    line-height: 1.3;

    padding: 10px 16px;

}

■ ボタン2

.j-calltoaction-align-2 {

    text-align: center;

}


.j-calltoaction-link-style-2 {

    border-radius: 6px;

    font-size: 14px;

    line-height: 1.4;

    padding: 6px 12px;

}


■ ボタン3

.j-calltoaction-align-3 {

    text-align: right;

}


.j-calltoaction-link-style-3 {

    border-radius: 3px;

    font-size: 12px;

    line-height: 1.5;

    padding: 1px 5px;

}


a:link, a:visited {

    color: #c34300;

    text-decoration: underline;

}

■ 共通

.j-calltoaction-link {

    -moz-user-select: none;

    background-color: #696969;

    background-image: none;

    border: 1px solid #5f5f5f;

    color: #fff !important;

    cursor: pointer;

    display: inline-block;

    text-align: center;

    text-decoration: none !important;

    vertical-align: middle;

}

株式会社 PIK

〒108-0075 港区港南3-4-12

TEL.03-6433-0422