ボタン
ボタン 【j-callToAction】
ボタン１、２、３
<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 ボタン１
j-calltoaction-link-style-2 ボタン２
j-calltoaction-link-style-3 ボタン３
※ボタンの場合、位置や色などの属性は、
おそらくjavascript側からの指定によってスタイルシートが割り照られるいるもよう。
javascriptに割り当てられている属性
window.regModule("module_callToAction", {"style":"1","align":"1","id":xxxxxxxxxx});
"style":"1", ボタン１～３
"align":"1" 位置関係 １左寄せ、２中央、３右寄せ
"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;
}