cssで「〇〇○　　　　＞」のようなボタンの作り方。もしくは作れるジェネレーター

このようなボタンをcssで作りたいです。
現在、スマホ用のサイトを作っています。添付画像はフォトショップで作ったもので、これを幅100％の指定で貼り付けたところ、スマホでは綺麗に表示されるのですが、PCでサイトを見た時は大画面で拡大されるため、文字がぼやけてしまいます。

例えば、「contact」というhtmlで表示した文字をcssで装飾し、背景を黒にしてボタンらしくするところまではできたのですが、「＞」という記号を画面の一番右に寄せることができません。下の画像のような、ボタンが画面の両端にめいいっぱい伸びたデザインにしたいため、幅100％で指定したいです。

「＞」が画面の右端に来るようなボタンをcssで作る方法を教えていただきたいです。
またこのようなボタンが作れるジェネレーターのサイトがあれば教えていただきたいです。色々ジェネレータ探してみましたが、「＞」を右端に寄せられるものを作れるものは中々見つかりませんでした。

また、大画面で見ても画像がぼやけないような方法がありましたらそちらでも構いません。

文章も拙いですが、どうかよろしくお願いします。

行動規範の内容に同意します

回答5件

右端の「＞」は

テキストの不等号記号「＞」を使う
borderで直角を描画し、transform:rotate(45deg)で回転させる
画像にする

などいろいろな方法があるかと思います。
どの方法でも構いませんが、HTMLをクリーン保つなら
「＞」は::after擬似要素で表示してやるのがよいかと思います。

右端に寄せる方法は、position:absolute;を使うのが良いと思います。
右端に寄せるだけでなく、メニューコンテナの上下中央に配置することもできますので。

HTML
1<ul class="menu">
2<li><a href="#">メニュー1</a></li>
3<li><a href="#">メニュー2</a></li>
4</ul>

CSS
1.menu a{
2  display: block;
3  position: relative;
4  padding: 10px;
5  border-bottom: #fff 1px solid;
6  background: #000;
7  color: #fff;
8  text-decoration: none;
9}
10.menu a::after{
11  content: "";
12  display: block;
13  width: 8px;
14  height: 8px;
15  border-top: #fff 2px solid;
16  border-right: #fff 2px solid;
17  -webkit-transform: rotate(45deg);
18  -ms-transform: rotate(45deg);
19  transform: rotate(45deg);
20  position: absolute;
21  right: 10px;
22  top: 0;
23  bottom: 0;
24  margin: auto;
25}
26

投稿2015/08/13 15:11

aKusano

総合スコア3763

文字にfloatかければいけると思います。
ひとつサンプルを
http://www.cssdesk.com/czjxw

投稿2015/08/13 05:09

naga3

総合スコア1293

2.5dBUTTONというサイトはボタンにアイコンを追加できます。(Font Awesomeでしょうか？)>などの記号もあるので、それを選択してください。ボタン部分のコードは

html
1<!-- 
2  Using Modernizr.js for smartphone.
3  http://modernizr.com
4-->
5<div class="general-button">
6  <div class="button-content">
7    <span class="icon-font">right</span>
8    <span class="button-text">TEXT</span>
9  </div>
10</div>