Code für CSS nur Schaltfläche wie folgt? Ein anderer Weg um diesen Stil?

Gibt es eine bessere Version dieser Schaltfläche oder eine weniger verzögerte?Code für CSS nur Schaltfläche wie folgt? Ein anderer Weg um diesen Stil?

Ich habe versucht, genau diese Art von Stil Knopf zu finden, aber ich kann nicht. Dies ist ein sehr schlechter Versuch, der stark überarbeitet werden muss, da ich nicht von Anfang an über das richtige Styling nachgedacht habe.

Alle Links oder effizienteren Code stark

geschätzt würde

Ich habe einen ähnlichen Code aber es ist nur diese genaue Art der Linien im Grunde um die Schaltfläche gezogen und entfernt wird gesehen, dass Ich mag würde (dies ist nur ein Streifzug wegen der „Anforderung“, um mehr einer Beschreibung als Code haben)

.UnderlineButton { 
 
\t border: none; 
 
\t background-color: white; 
 
\t position: relative; 
 
\t border: 2px solid; 
 
\t border-top-color: rgb(255,255,255); 
 
\t border-right-color: rgb(255,255,255); 
 
\t border-left-color: rgb(255,255,255); 
 
\t border-bottom-color: rgb(255,255,255); 
 
    padding: 10px; 
 
\t padding-top: 20px; 
 
    padding-bottom: 0; 
 
\t cursor: pointer; 
 
\t 
 
\t -webkit-animation: UnderlineButton .5s forwards; 
 
} 
 

 
\t @-webkit-keyframes UnderlineButton { 
 
\t \t 0% { 
 
\t \t \t padding-top: 10px; 
 
\t \t \t padding-bottom: 10px; 
 
\t \t \t border-right-color: red; 
 
\t \t \t border-bottom-color: rgb(255,255,255); 
 
\t \t \t border-top-color: red; 
 
\t \t \t border-left-color: red; 
 
\t \t } 
 
\t \t 19% { 
 
\t \t \t border-right-color: red; 
 
\t \t } 
 
\t \t 20% { 
 
\t \t \t border-right-color: rgb(255,255,255); 
 
\t \t \t border-bottom-color: rgb(255,255,255); 
 
\t \t \t border-top-color: red; 
 
\t \t \t border-left-color: red; 
 
\t \t } 
 
\t \t 39% { 
 
\t \t \t border-top-color: red; 
 
\t \t } 
 
\t \t 40% { 
 
\t \t \t border-right-color: rgb(255,255,255); 
 
\t \t \t border-bottom-color: rgb(255,255,255); 
 
\t \t \t border-top-color: rgb(255,255,255); 
 
\t \t \t border-left-color: red; 
 
\t \t } 
 
\t \t 59% { 
 
\t \t \t border-left-color: red; 
 
\t \t } 
 
\t \t 60 { 
 
\t \t \t border-right-color: rgb(255,255,255); 
 
\t \t \t border-bottom-color: rgb(255,255,255); 
 
\t \t \t border-top-color: rgb(255,255,255); 
 
\t \t \t border-left-color: rgb(255,255,255); 
 
\t \t } 
 
\t \t 100% { 
 
\t \t \t padding-top: 20px; 
 
\t \t \t padding-bottom: 0; 
 
\t \t \t border-right-color: rgb(255,255,255); 
 
\t \t \t border-top-color: rgb(255,255,255); 
 
\t \t \t border-left-color: rgb(255,255,255); 
 
\t \t \t border-bottom-color: rgb(255,255,255); 
 
\t \t } 
 
\t } 
 
\t 
 
\t .UnderlineButton:hover { 
 
\t \t -webkit-animation: UnderlineButtonHover .5s forwards; 
 
\t } 
 
\t 
 
\t @-webkit-keyframes UnderlineButtonHover { 
 
\t \t 0% { 
 
\t \t \t padding-top: 20px; 
 
\t \t \t padding-bottom: 0; 
 
\t \t \t border-right-color: rgb(255,255,255); 
 
\t \t \t border-top-color: rgb(255,255,255); 
 
\t \t \t border-left-color: rgb(255,255,255); 
 
\t \t \t border-bottom-color: rgb(255,255,255); 
 
\t \t } 
 
\t \t 20% { 
 
\t \t \t padding-top: 20px; 
 
\t \t \t padding-bottom: 0; 
 
\t \t \t border-right-color: rgb(255,255,255); 
 
\t \t \t border-top-color: rgb(255,255,255); 
 
\t \t \t border-left-color: rgb(255,255,255); 
 
\t \t \t border-bottom-color: rgb(255,255,255); 
 
\t \t } 
 
\t \t 39% { 
 
\t \t \t border-right-color: rgb(255,255,255); 
 
\t \t } 
 
\t \t 40% { 
 
\t \t \t border-right-color: red; 
 
\t \t \t border-left-color: rgb(255,255,255); 
 
\t \t \t border-top-color: rgb(255,255,255); 
 
\t \t \t border-bottom-color: rgb(255,255,255); 
 
\t \t } 
 
\t \t 59% { 
 
\t \t \t border-top-color: rgb(255,255,255); 
 
\t \t } 
 
\t \t 60% { 
 
\t \t \t border-right-color: red; 
 
\t \t \t border-top-color: red; 
 
\t \t \t border-left-color: rgb(255,255,255); 
 
\t \t \t border-bottom-color: rgb(255,255,255); 
 
\t \t } 
 
\t \t 79% { 
 
\t \t \t border-left-color: rgb(255,255,255); 
 
\t \t } 
 
\t \t 80% { 
 
\t \t \t border-right-color: red; 
 
\t \t \t border-top-color: red; 
 
\t \t \t border-left-color: red; 
 
\t \t \t border-bottom-color: rgb(255,255,255); 
 
\t \t } 
 
\t \t 99% { 
 
\t \t \t border-bottom-color: red; 
 
\t \t } 
 
\t \t 100% { 
 
\t \t \t padding-top: 10px; 
 
\t \t \t padding-bottom: 10px; 
 
\t \t \t border-right-color: red; 
 
\t \t \t border-bottom-color: red; 
 
\t \t \t border-top-color: red; 
 
\t \t \t border-left-color: red; 
 
\t \t } 
 
\t } 
 

 

 
\t .UnderlineButton:before { 
 
\t \t position: absolute; 
 
\t \t bottom: -2px; 
 
\t \t background-color: red; 
 
\t \t width: 80%; 
 
\t \t height: 2px; 
 
\t \t content: ""; 
 
\t \t right: 10%; 
 
\t \t -webkit-animation: UnderlineButtonBefore .5s forwards; 
 
\t } 
 
\t 
 
\t \t @-webkit-keyframes UnderlineButtonBefore { 
 
\t \t \t 0% { 
 
\t \t \t \t top: 100%; 
 
\t \t \t \t width: 100%; 
 
\t \t \t \t left: 0; 
 
\t \t \t \t right: 0; 
 
\t \t \t \t height: 2px; 
 
\t \t \t } 
 
\t \t \t 20% { 
 
\t \t \t \t left: 100%; 
 
\t \t \t \t right: 0; 
 
\t \t \t \t height: 2px; 
 
\t \t \t \t width: 2px; 
 
\t \t \t \t top: 100%; 
 
\t \t \t } 
 
\t \t \t 21% { 
 
\t \t \t \t top: 0; 
 
\t \t \t \t width: 2px; 
 
\t \t \t \t height: 100%; 
 
\t \t \t \t right: 0; 
 
\t \t \t \t left: 100%; 
 
\t \t \t } 
 
\t \t \t 40% { 
 
\t \t \t \t top: 0; 
 
\t \t \t \t width: 2px; 
 
\t \t \t \t height: 2px; 
 
\t \t \t \t right: 0; 
 
\t \t \t \t left: 100%; 
 
\t \t \t } 
 
\t \t \t 41% { 
 
\t \t \t \t top: -2px; 
 
\t \t \t \t width: 100%; 
 
\t \t \t \t height: 2px; 
 
\t \t \t \t right: 0; 
 
\t \t \t \t left: 0; 
 
\t \t \t } 
 
\t \t \t 60% { 
 
\t \t \t \t top: -2px; 
 
\t \t \t \t width: 2px; 
 
\t \t \t \t height: 2px; 
 
\t \t \t \t left: 0; 
 
\t \t \t } 
 
\t \t \t 61% { 
 
\t \t \t \t top: 0; 
 
\t \t \t \t width: 2px; 
 
\t \t \t \t height: 100%; 
 
\t \t \t \t left: -2px; 
 
\t \t \t \t bottom: 0; 
 
\t \t \t } 
 
\t \t \t 80% { 
 
\t \t \t \t top: 100%; 
 
\t \t \t \t bottom: 0; 
 
\t \t \t \t width: 2px; 
 
\t \t \t \t height: 0; 
 
\t \t \t \t left: -2px; 
 
\t \t \t \t bottom: 0; 
 
\t \t \t } 
 
\t \t \t 90% { 
 
\t \t \t \t bottom: -2px; 
 
\t \t \t \t left: 0; 
 
\t \t \t \t width: 0; 
 
\t \t \t \t height: 2px; 
 
\t \t \t } 
 
\t \t \t 100% { 
 
\t \t \t \t right: 10%; 
 
\t \t \t \t left: 10%; 
 
\t \t \t \t width: 80%; 
 
\t \t \t \t bottom: -2px; 
 
\t \t \t \t height: 2px; 
 
\t \t \t } 
 
\t \t } 
 
\t 
 
\t .UnderlineButton:hover:before { 
 

 
\t \t -webkit-animation: UnderlineButtonBeforeHover .5s forwards; 
 
\t } 
 
\t 
 
\t \t @-webkit-keyframes UnderlineButtonBeforeHover { 
 
\t \t \t 0% { 
 
\t \t \t \t right: 10%; 
 
\t \t \t \t width: 80%; 
 
\t \t \t \t left: 10%; 
 
\t \t \t } 
 
\t \t \t 20% { 
 
\t \t \t \t right: 0; 
 
\t \t \t \t width: 2px; 
 
\t \t \t \t height: 2px; 
 
\t \t \t \t bottom: -2px; 
 
\t \t \t \t left: 100%; 
 
\t \t \t } 
 
\t \t \t 21% { 
 
\t \t \t \t right: 0; 
 
\t \t \t \t width: 2px; 
 
\t \t \t \t height: 2px; 
 
\t \t \t \t top: 100%; 
 
\t \t \t \t 
 
\t \t \t } 
 
\t \t \t 40% { 
 
\t \t \t \t width: 2px; 
 
\t \t \t \t height: 100%; 
 
\t \t \t \t top: 0; 
 
\t \t \t \t right: -2px; 
 
\t \t \t } 
 
\t \t \t 41% { 
 
\t \t \t \t top: -2px; 
 
\t \t \t \t height: 2px; 
 
\t \t \t \t width: 2px; 
 
\t \t \t \t left: 100%; 
 
\t \t \t } 
 
\t \t \t 60% { 
 
\t \t \t \t width: 100%; 
 
\t \t \t \t height: 2px; 
 
\t \t \t \t left: 0; 
 
\t \t \t \t top: -2px; 
 
\t \t \t } 
 
\t \t \t 61% { 
 
\t \t \t \t width: 2px; 
 
\t \t \t \t height: 2px; 
 
\t \t \t \t top: -2px; 
 
\t \t \t \t left: -2px; 
 
\t \t \t } 
 
\t \t \t 80% { 
 
\t \t \t \t height: 100%; 
 
\t \t \t \t width: 2px; 
 
\t \t \t \t top: -2px; 
 
\t \t \t \t left: -2px; 
 
\t \t \t } 
 
\t \t \t 81% { 
 
\t \t \t \t height: 2px; 
 
\t \t \t \t width: 2px; 
 
\t \t \t \t bottom: -2px; 
 
\t \t \t \t left: -2px; 
 
\t \t \t \t top: 100%; 
 
\t \t \t } 
 
\t \t \t 100% { 
 
\t \t \t \t top: 100%; 
 
\t \t \t \t width: 100%; 
 
\t \t \t \t left: 0; 
 
\t \t \t \t height: 2px; 
 
\t \t \t } 
 
\t \t }

<div style="padding: 40px; background-color:rgb(252,252,252);"> 
 
    <button class="UnderlineButton">Underline</button> 
 
</div>

Quelle

2017-12-24 lllllllllllllIllllIll

Was ist Ihre Frage genau? Was funktioniert nicht so, wie du es erwartest? – jmargolisvt

Es sieht sehr lückig aus, ich hätte gerne eine bessere Version dieses Buttons. Sorry für die Verwirrung – lllllllllllllIllllIll

FWIW, keine Verzögerung zu sehen. Sieht gut aus für mich. – jmargolisvt

ich glaube, Sie für etwas dieser Art suchen. Ich hatte eine ähnliche Anforderung in der Vergangenheit. Geben Sie mir nur ein paar Momente, um Ihre Anforderung zu ändern. In der Zwischenzeit können Sie gerne sehen, ob Sie es selbst tun können. Ich glaube, Sie suchen nach dem Übergang?

button { 
 
    background: none; 
 
    border: 0; 
 
    -webkit-box-sizing: border-box; 
 
      box-sizing: border-box; 
 
    margin: 1em; 
 
    padding: 1em 2em; 
 
    -webkit-box-shadow: inset 0 0 0 2px #f45e61; 
 
      box-shadow: inset 0 0 0 2px #f45e61; 
 
    color: #f45e61; 
 
    font-size: inherit; 
 
    font-weight: 700; 
 
    position: relative; 
 
    vertical-align: middle; 
 
} 
 
button::before, button::after { 
 
    -webkit-box-sizing: inherit; 
 
      box-sizing: inherit; 
 
    content: ''; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.draw { 
 
    -webkit-transition: color 0.25s; 
 
    transition: color 0.25s; 
 
} 
 
.draw::before, .draw::after { 
 
    border: 2px solid transparent; 
 
    width: 0; 
 
    height: 0; 
 
} 
 
.draw::before { 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.draw::after { 
 
    bottom: 0; 
 
    right: 0; 
 
} 
 
.draw:hover { 
 
    color: #60daaa; 
 
} 
 
.draw:hover::before, .draw:hover::after { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.draw:hover::before { 
 
    border-top-color: #60daaa; 
 
    border-right-color: #60daaa; 
 
    -webkit-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s; 
 
    transition: width 0.25s ease-out, height 0.25s ease-out 0.25s; 
 
} 
 
.draw:hover::after { 
 
    border-bottom-color: #60daaa; 
 
    border-left-color: #60daaa; 
 
    -webkit-transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s; 
 
    transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s; 
 
}

<html> 
 
<head> 
 

 

 
</head> 
 
<body> 
 
<div id="wrapper"> 
 

 
<section class="buttons"> 
 
<button class="draw">Draw</button> 
 
<section> 
 
</div> 
 

 

 
</body> 
 
</html>

Quelle

2017-12-24 02:42:19

Dies ist eines der Beispiele, die ich gefunden habe! Allerdings möchte ich es bei der Rückkehr leider auch animieren. Auch ein Problem, das ich mit dem Übergang gefunden habe, ist, wenn Sie Ihre Maus während der Animation wegbewegen, erhalten Sie ein Glitch-y-Ergebnis, wo Sie mit der Animation vorwärts nicht dieses Problem bekommen. – lllllllllllllIllllIll

Code für CSS nur Schaltfläche wie folgt? Ein anderer Weg um diesen Stil?

Antwort

Verwandte Themen