月額、年額サービス用の美しい価格表CSS

美しい価格表のCSSのご紹介。

海外Claudia Romano氏が作成した無料で使える価格表テーブルです。

月額と年額の切り替え機能が付いているタイプでお探しの方に特にオススメです。

どんなものかというのは以下の動画で。

サンプルデモ

HTML

<div class="cd-pricing-container">
	<div class="cd-pricing-switcher">
		<p class="fieldset">
			<input type="radio" name="duration" value="monthly" id="monthly" checked>
			<label for="monthly">Monthly</label>
			<input type="radio" name="duration" value="yearly" id="yearly">
			<label for="yearly">Yearly</label>
			<span class="cd-switch"></span>
		</p>
	</div> <!-- .cd-pricing-switcher -->

	<ul class="cd-pricing-list">
		<li>
			<ul class="cd-pricing-wrapper">
				<li data-type="monthly" class="is-visible">
					<header class="cd-pricing-header">
						<h2>Basic</h2>
						<div class="cd-price">
							<span class="cd-currency">$</span>
							<span class="cd-value">30</span>
							<span class="cd-duration">mo</span>
						</div>
					</header> <!-- .cd-pricing-header -->

					<div class="cd-pricing-body">
						<ul class="cd-pricing-features">
							<li><em>256MB</em> Memory</li>
							<!-- other features here -->
						</ul>
					</div> <!-- .cd-pricing-body -->

					<footer class="cd-pricing-footer">
						<a class="cd-select" href="http://codyhouse.co">Select</a>
					</footer> <!-- .cd-pricing-footer -->
				</li>

				<li data-type="yearly" class="is-hidden">
					<!-- pricing table content here -->
				</li>
			</ul> <!-- .cd-pricing-wrapper -->
		</li>

		<li class="cd-popular">
			<ul class="cd-pricing-wrapper">
				<li data-type="monthly" class="is-visible">
					<!-- pricing table content here -->
				</li>

				<li data-type="yearly" class="is-hidden">
					<!-- pricing table content here -->
				</li>
			</ul>
		</li> <!-- .cd-pricing-wrapper -->

		<li>
			<ul class="cd-pricing-wrapper">
				<li data-type="monthly" class="is-visible">
					<!-- pricing table content here -->
				</li>

				<li data-type="yearly" class="is-hidden">
					<!-- pricing table content here -->
				</li>
			</ul> <!-- .cd-pricing-wrapper -->
		</li>
	</ul> <!-- .cd-pricing-list -->
</div> <!-- .cd-pricing-container -->

CSS

.cd-pricing-header {
  height: 80px;
  pointer-events: none;
}

.cd-pricing-body {
  overflow-x: auto;
  /* smooth scrolling on touch devices */
  -webkit-overflow-scrolling: touch;
}

.cd-pricing-footer {
  position: absolute;
  top: 0;
  left: 0;
  height: 80px;
  width: 100%;
}

.cd-select {
  display: block;
  height: 100%;
  /* hide button text on mobile */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  color: transparent;
}

ダウンロードは以下から可能です。

ダウンロードページ

結構簡単に設置出来てしまうところが魅力です。

お試しあれ。

それでは、また。