単一の CSS 要素で細長い六角形のボタンを作成できますか?

CSS で細長い六角形のボタンを作成する (単一要素ソリューション)

ボタンのデザインの領域では、細長い六角形がよく目を引きます。 。通常は複数の要素を使用して実現されますが、1 つだけを使用してそのようなボタンを作成することは可能ですか?

答えは「はい」です。このユニークなデザインを実現する創造的なソリューションは次のとおりです。

基本形状の構築

1. サイズを指定した 2 つの疑似要素 (:before と :after) を利用します。メインのボタン要素の約半分。
2. 疑似要素に異なる高さを設定して、

傾斜効果の実現

1. 遠近法とrotateXを使用して:before要素を変換し、傾斜効果を作成します。前面に向かってわずかに回転します。
2. 同様の変換を :after 要素に適用しますが、背面にわずかに回転します。

要素の配置

1. :before 要素と :after 要素を隣り合って配置し、連続した要素を作成します。
2. 絶対位置を使用して配置を調整します。

境界線と色で強調する

1. 両方の疑似オブジェクトに境界線を追加します-定義された形状の要素。
2. 適切な色を適用して、形状をさらに強化します。外観。

インタラクティブな効果 (オプション)

1. メイン ボタンとホバー トランジションを備えた疑似要素をスタイルして、インタラクティブな動作を追加します。
2. 色と効果を次のようにカスタマイズします

コード例

/* General Button Style */

.button {
  position: relative;
  display: block;
  background: transparent;
  width: 300px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 20px;
  text-decoration: none;
  text-transform: uppercase;
  color: #e04e5e;
  margin: 40px auto;
  font-family: Helvetica, Arial, sans-serif;
  box-sizing: border-box;
}

.button:before,
.button:after {
  position: absolute;
  content: '';
  width: 300px;
  left: 0px;
  height: 34px;
  z-index: -1;
}

.button:before {
  transform: perspective(15px) rotateX(3deg);
}

.button:after {
  top: 40px;
  transform: perspective(15px) rotateX(-3deg);
}

/* Button Border Style */

.button.border:before,
.button.border:after {
  border: 4px solid #e04e5e;
}

.button.border:before {
  border-bottom: none; /* to prevent the border-line showing up in the middle of the shape */
}

.button.border:after {
  border-top: none; /* to prevent the border-line showing up in the middle of the shape */
}

  
/* Button hover styles */

.button.border:hover:before,
.button.border:hover:after {
  background: #e04e5e;
}

.button.border:hover {
  color: #fff;
}

  
<a href="#" class="button ribbon-outset border">Click me!</a>
  

この独創的なアプローチを活用することで、たった 1 つの要素を使用して魅力的な細長い六角形のボタンを簡単に作成できます。このテクニックは、あらゆるユーザー インターフェイスに優雅さと独自性を加えます。

以上が単一の CSS 要素で細長い六角形のボタンを作成できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。