【コピペで使える】HTML／CSSで作るシンプルボタンサンプル
たーさんシンプルボタンとは
レスポンシブデザインが主流になってから、HTMLとCSSで作るリンクボタンを使用する機会も増えてきましたね。
一昔前は画像でボタンを作る機会が多かったですが、レスポンシブデザインの場合、画像は過度に引き伸ばされたり縮小されたりするため、ちょっと扱いづらいんですね。
また、画像ファイルはファイル容量も大きめなので多様するとページ読み込み速度が低下するデメリットもあります。
そんなこともあって、最近はむやみに画像を使わず、できるだけHTMLとCSSでデザインを組むというのがスマートな方法になっているように思います。
HTML部
<div class="simple_btn">
<a href="">文言</a>
</div>
CSS部
.simple_btn{
padding:10px 0 10px 0;
text-align:center;
margin:0 auto;
width:100%; // ボタンの幅
background:#f8f8f8; // 背景色
font-size:16px; // テキストの大きさ
color:#000000; // 文字色
border:1px solid #e8e8e8; // ボタンの縁取りの色
}
.simple_btn a {
display:block;
width:100%;
text-decoration:none;
}
.simple_btn a:hover {
opacity:0.8;
}
ボタンの色やデザインなどは上記をベースに編集してください。
投稿者プロフィール
- 代表者
-
東海大学工学部を卒業後、東芝情報システム株式会社（旧グループ会社含む）に入社。半導体（SRAM）の開発チームにて、Unix環境でのPerlを用いた業務自動化プログラムの開発など、エンジニアとしての確かな基礎と緻密な論理的思考力を培う。
その後、東証上場企業である株式会社ザッパラスへ。Web・モバイルの最前線で、数多くのユーザーに愛されるコンテンツ制作業務に従事。ここで「ユーザー目線に立った魅力的なWebコンテンツの企画・制作ノウハウ」を深く学ぶ。
開発・システム側から見た「堅牢なロジック」と、制作・ユーザー側から見た「伝わるコンテンツ」の双方を実務で経験した強みを活かし、フリーランスとして独立。
現在は、ウイングアーク1st株式会社の「データのじかん」運営チームに参画するなど、大手・中小企業のWeb運営・開発パートナーとして活動。完全在宅でありながら、固定IPの完備や厳格なセキュリティポリシーの遵守を徹底し、企業のインフラや本番環境を安全に支える「チームの一員」として高い信頼を得ています。
見た目の美しさはもちろんのこと、内部の構造やWordPressのカスタマイズ、運用・セキュリティまでを見据えた、技術的バックボーンのある高品質なWebサイト・システム制作をワンストップでご提供しています。
