作成しようとしているボタンがあります。誰かがその上にカーソルを置いたときに、次のアクションが発生するようにしたい -->
ホバリング中 1) 色が別の色にフェードアウトする 2) 別の色が最初の色にフェードバックする
トリックは、ユーザーがボタンからマウスを離したときではなく、ホバー状態の間にフェードバックが発生するようにすることです。
2 番目のトリックは、形状を実現するために、かなりの数の境界操作があり、それに応じてそれらも変更したいということです。
ここにボタンの jsfiddle があります --> http://jsfiddle.net/88B3e/1/
HTML -->
<a href="#" class="more">
<span class="triangle1"></span>
<span class="thoughts">thoughts?</span><span class="triangle"></span>
</a>
CSS -->
.triangle1 {
float: left;
font-size: 0px;
line-height: 0%;
width: 0px;
border-top: 12px solid #de8063;
border-bottom: 12px solid #de8063;
border-right: none;
border-left: 12px solid #f5f3f0;
}
.thoughts {
float: left;
background-color: #de8063;
padding: 3px 2px 2px 4px;
color: #f0dfd8;
font-family: 'PT Sans';
font-size: 14px;
text-align: center;
font-weight: 300;
}
.triangle {
float: left;
font-size: 0px;
line-height: 0%;
width: 0px;
border-top: 12px solid #f5f3f0;
border-left: 12px solid #de8063;
border-bottom: 12px solid #f5f3f0;
}
あなたの賢明なアドバイスが切実に必要です:)。
乾杯、ステパン