Asairo Design

デザイン制作チーム 浅色デザインオフィシャルサイト。web関連やメモの置き場所。熊本県出身のweb制作者。たまに小説。

WEB CSS

矢印つきボタン例

投稿日:

HTML

<a href="" class="maru arrow">ボタン</a>

CSS

.arrow { position: relative; display: inline-block; padding: 0 16px 0 0; color: #000; vertical-align: middle; text-decoration: none; }
.arrow::before, .arrow::after { position: absolute; top: 0; bottom: 0; right: 0; margin: auto; content: ""; vertical-align: middle; }
.maru::before { width: 12px; height: 12px; -webkit-border-radius: 50%; border-radius: 50%; background: #fff; }
.maru::after { right: 5px; width: 3px; height: 3.2px;/* .2がないとホバー時にずれる */ border-top: 1px solid #4cbbd0; border-right: 1px solid #4cbbd0; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.maru:hover::after { border-color: #4cbbd0; }

-WEB, CSS

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

webを自分視点で見るというサイトの話

Webに携わる人間として、よくホームページは検索して見ます。 「キレイだなー」 「お、なんか面白い動き!」 と、いう感想は覚えるのですが、あえてデザイン概論みたいに 「ここはこういう色でこういう仕組み …

no image

クロームやiphoneでラジオボタンが消える

Webkit特有のものでしょうか。 【フォームタグ】 これだけでラジオボタンができる しかし とすると、クロームやiPhoneで表示されない ところが とすると表示可能 あまり知られてないけど。

no image

コメントで遊ぼう。

スパムが7件もなってたので、WPプラグインのDisqus Comment Systemを導入しました。

no image

グラデーションのボーダーをCSSでつくる

備忘録Tips 3区切りのボーダー 【表示例】 【CSS】 /* 3区切りのボーダー */ .greenLine { background: #008000; /* Old browsers */ b …

no image

チェックボックス CSSでのみ装飾 サンプル2

未チェック HTML <div class="wrapper"> <label class="checker"> <input t …

名古屋AC

※虐待防止講演会2017 記事一覧

おススメ書籍(AD)

(AD)