Comment définir la bordure gauche et droite du bouton en utilisant un seul: avant ou: après avec un espace de 20px à gauche et à droite du bouton, ce que j'ai essayé de définir la bordure voir la pièce jointe du design - ce que je veux. S'il vous plaît, aidez-moi par ma capture d'écran. Merci d'avance.
<section class="btn-action"> <div class="border"> <a href="#" class="btn primary">Get Started</a> </div> </section>
.btn-action { display: block; text-align: center; max-width: 800px; margin: 0 auto; background-color: gray; height: 400px; -webkit-box-orient: vertical!important; -webkit-box-direction: normal!important; -ms-flex-direction: column!important; flex-direction: column!important; display: -webkit-box!important; display: -ms-flexbox!important; display: flex!important; -webkit-box-pack: center!important; -ms-flex-pack: center!important; justify-content: center!important; -webkit-box-align: center!important; -ms-flex-align: center!important; align-items: center!important; } .btn { display: inline-block; font-size: 18px; line-height: 24px; color: #fff; padding: 12px 32px; border: 2px solid #C3A165; text-transform: uppercase; font-weight: 500; background-color: transparent; border-radius: 0; text-decoration: none; transition: 0.3s all; -webkit-transition: 0.3s all; -moz-transition: 0.3s all; -ms-transition: 0.3s all; } .btn:hover { background-color: #C3A165; color: #fff; border-color: #C3A165; } .btn:before { content: ''; height: 1px; background-color: #C3A165; width: 100%; position: absolute; left: 0; top: 25px; } .border { position: relative; width: 100%; }
3 Réponses :
Puisqu'un seul pseudo élément est autorisé, vous pouvez utiliser box-shadow
pour obtenir l'effet. Cependant, les valeurs de position doivent être codées en dur.
<section class="btn-action"> <div class="border"> <a href="#" class="btn primary">Get Started</a> </div> </section>
.btn-action { display: block; text-align: center; max-width: 800px; margin: 0 auto; background-color: gray; height: 400px; -webkit-box-orient: vertical!important; -webkit-box-direction: normal!important; -ms-flex-direction: column!important; flex-direction: column!important; display: -webkit-box!important; display: -ms-flexbox!important; display: flex!important; -webkit-box-pack: center!important; -ms-flex-pack: center!important; justify-content: center!important; -webkit-box-align: center!important; -ms-flex-align: center!important; align-items: center!important; overflow: hidden; } .btn { display: inline-block; font-size: 18px; line-height: 24px; color: #fff; padding: 12px 32px; border: 2px solid #C3A165; text-transform: uppercase; font-weight: 500; background-color: transparent; border-radius: 0; text-decoration: none; transition: 0.3s all; -webkit-transition: 0.3s all; -moz-transition: 0.3s all; -ms-transition: 0.3s all; } .btn:hover { background-color: #C3A165; color: #fff; border-color: #C3A165; } .btn:before { content: ''; height: 1px; background: linear-gradient(to right,#C3A165 30%,transparent 30% 70%,#C3A165 70% 100%); width: 100%; position: absolute; left: 0px; top: 25px; } .border { position: relative; width: 100%; }
Une autre méthode consiste à utiliser linear-gradient
<section class="btn-action"> <div class="border"> <a href="#" class="btn primary">Get Started</a> </div> </section>
.btn-action { display: block; text-align: center; max-width: 800px; margin: 0 auto; background-color: gray; height: 400px; -webkit-box-orient: vertical!important; -webkit-box-direction: normal!important; -ms-flex-direction: column!important; flex-direction: column!important; display: -webkit-box!important; display: -ms-flexbox!important; display: flex!important; -webkit-box-pack: center!important; -ms-flex-pack: center!important; justify-content: center!important; -webkit-box-align: center!important; -ms-flex-align: center!important; align-items: center!important; overflow: hidden; } .btn { display: inline-block; font-size: 18px; line-height: 24px; color: #fff; padding: 12px 32px; border: 2px solid #C3A165; text-transform: uppercase; font-weight: 500; background-color: transparent; border-radius: 0; text-decoration: none; transition: 0.3s all; -webkit-transition: 0.3s all; -moz-transition: 0.3s all; -ms-transition: 0.3s all; } .btn:hover { background-color: #C3A165; color: #fff; border-color: #C3A165; } .btn:before { content: ''; height: 1px; background: linear-gradient(to right,#C3A165 30%,transparent 30% 70%,#C3A165 70% 100%); width: 100%; position: absolute; left: 0px; top: 25px; } .border { position: relative; width: 100%; }
Utilisez à la fois : before
et : after
respectivement pour les lignes gauche et droite.
<section class="btn-action"> <div class="border"> <a href="#" class="btn primary">Get Started</a> </div> </section>
.btn-action { display: block; text-align: center; max-width: 800px; margin: 0 auto; background-color: gray; height: 400px; -webkit-box-orient: vertical!important; -webkit-box-direction: normal!important; -ms-flex-direction: column!important; flex-direction: column!important; display: -webkit-box!important; display: -ms-flexbox!important; display: flex!important; -webkit-box-pack: center!important; -ms-flex-pack: center!important; justify-content: center!important; -webkit-box-align: center!important; -ms-flex-align: center!important; align-items: center!important; overflow: hidden; } .btn { position: relative; display: inline-block; font-size: 18px; line-height: 24px; color: #fff; padding: 12px 32px; border: 2px solid #C3A165; text-transform: uppercase; font-weight: 500; background-color: transparent; border-radius: 0; text-decoration: none; transition: 0.3s all; -webkit-transition: 0.3s all; -moz-transition: 0.3s all; -ms-transition: 0.3s all; } .btn:hover { background-color: #C3A165; color: #fff; border-color: #C3A165; } .btn:before { content: ''; height: 1px; background-color: #C3A165; width: 1000px; position: absolute; left: -1040px; top: 25px; } .btn:after { content: ''; height: 1px; background-color: #C3A165; width: 1000px; position: absolute; right: -1040px; top: 25px; } .border { position: relative; width: 100%; }
Appliquer ce css peut être celui que vous recherchez
.btn { display: inline-block; font-size: 18px; line-height: 24px; color: #fff; padding: 12px 32px; border: 2px solid #C3A165; text-transform: uppercase; font-weight: 500; background-color: transparent; border-radius: 0; text-decoration: none; transition: 0.3s all; -webkit-transition: 0.3s all; -moz-transition: 0.3s all; -ms-transition: 0.3s all; z-index:2; } .btn:hover { background-color: #C3A165; color: #fff; border-color: #C3A165; } .btn:before { content: ''; height: 1px; background-color: #C3A165; width: 35%; position: absolute; left: 0; top: 25px; z-index:1; } .btn:after { content: ''; height: 1px; background-color: #C3A165; width: 35%; position: absolute; right: 0; top: 25px; z-index:1; } .border { position: relative; width: 100%; }