Kann ein einzelnes CSS-Element eine längliche sechseckige Schaltfläche erstellen?

Erstellen Sie längliche sechseckige Schaltflächen mit CSS (Einzelelementlösung)

Im Bereich des Schaltflächendesigns fällt oft die längliche Sechseckform ins Auge . Obwohl dies normalerweise mit mehreren Elementen erreicht wird, ist es möglich, eine solche Schaltfläche mit nur einem zu erstellen?

Die Antwort lautet „Ja“! Hier ist eine kreative Lösung, um dieses einzigartige Design zu erreichen:

Erstellen der Grundform

1. Verwenden Sie zwei Pseudoelemente (:before und :after) mit einer Größe ungefähr die Hälfte des Hauptknopfelements.
2. Stellen Sie unterschiedliche Höhen für die Pseudoelemente ein, um die Schräge zu erzeugen Linien.

Erzielen des Neigungseffekts

1. Transformieren Sie das :before-Element mithilfe der Perspektive und rotierenX, um einen Neigungseffekt zu erzeugen. Leicht nach vorne drehen.
2. Wenden Sie eine ähnliche Transformation auf das :after-Element an, drehen Sie jedoch leicht nach hinten.

Positionierung der Elemente

1. Platzieren Sie die :before- und :after-Elemente nebeneinander, sodass ein zusammenhängendes Element entsteht Form.
2. Verwenden Sie die absolute Positionierung, um ihre Ausrichtung anzupassen.

Hervorheben mit Rändern und Farben

1. Fügen Sie Ränder zu beiden Pseudoobjekten hinzu -Elemente für eine definierte Form.
2. Wenden Sie geeignete Farben an, um die zu verstärken Erscheinungsbild.

Interaktive Effekte (optional)

1. Stilisieren Sie die Hauptschaltfläche und Pseudoelemente mit Hover-Übergängen, um interaktives Verhalten hinzuzufügen.
2. Passen Sie die Farben und Effekte nach Ihren Wünschen an.

Code Beispiel

/* 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>
  

Durch die Nutzung dieses genialen Ansatzes können Sie mit nur einem Element mühelos faszinierende längliche sechseckige Knöpfe erstellen. Diese Technik verleiht jeder Benutzeroberfläche einen Hauch von Eleganz und Einzigartigkeit.

Das obige ist der detaillierte Inhalt vonKann ein einzelnes CSS-Element eine längliche sechseckige Schaltfläche erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!