2017-03-27 1 views
-3

Ich möchte einen Button mit 100px und 100px Höhe und mit Rahmenbreite 90px Höhe 120px erstellen. Aber als ich versuchte es zu sagen, bekam es ein merkwürdiges Verhalten. Ist das möglich?So erstellen Sie eine Schaltfläche mit benutzerdefinierten (unterschiedlichen) Höhe und Breite Rahmen - CSS

Hier ein Bild von dem Stil, den ich erreichen will: enter image description here

+0

Was Sie bisher versucht haben? Was ist das Ergebnis? Es ist möglich, aber Sie müssen Ihre Frage angeben. Für jetzt ist es eine "schlechte Frage" und wird wahrscheinlich downvoted. – hering

Antwort

1

Sie können button erstellen und :after Pseudoelement hinzufügen Grenze zu schaffen.

$('button').click(function() { 
 
    alert('Works') 
 
})
body { 
 
    background: gray; 
 
} 
 
button { 
 
    padding: 10px 30px; 
 
    background: #F26522; 
 
    font-size: 30px; 
 
    color: white; 
 
    position: relative; 
 
    border: none; 
 
    margin: 50px; 
 
} 
 
button:after { 
 
    content: ''; 
 
    position: absolute; 
 
    height: calc(100% + 10px); 
 
    width: calc(100% - 20px); 
 
    top: 0; 
 
    left: 0; 
 
    transform: translate(6px, -9px); 
 
    border: 4px dotted white; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>BUTTON</button>

0

Dies kann mit einem div und einem Pseudo-Elemente wie :after für den Randteil erfolgen.

body { 
 
    background-color: black; 
 
} 
 

 
div { 
 
    width: 130px; 
 
    height: 50px; 
 
    text-align: center; 
 
    line-height: 50px; 
 
    background-color: #ff4f00; 
 
    color: #fff; 
 
    position: relative; 
 
    margin-top: 20px; 
 
} 
 

 
div:after { 
 
    position: absolute; 
 
    content: ""; 
 
    width: 110px; 
 
    left: 10px; 
 
    top: -11px; 
 
    height: 70px; 
 
    border: 2px dotted #fff; 
 
}
<div> 
 
    CONOCENOS 
 
</div>

Verwandte Themen