Buttons Formen möglich mit PHP/CSS/HTML?

-2

Ich erstelle ein Login-Formular und möchte nette Buttons haben. Ich habe ein Beispiel für diese Schaltflächen online gesehen. Ist das mit html/css/php möglich?Buttons Formen möglich mit PHP/CSS/HTML?

Quelle

2017-05-29 Rowan Richie

Ja, es ist möglich – user2182349

Ja. Zwei Tasten + CSS. –

Bitte lesen Sie ["Wie stelle ich eine gute Frage?"] (Https://stackoverflow.com/help/how-to-ask) und bearbeiten Sie Ihre Frage entsprechend. –

es möglich ist, html/php mit CSS verwenden, einfach diese Zeilen zu Ihrem CSS-Code hinzufügen (Schaltfläche unter der Annahme nicht in einer Abteilung und alle Taste gleiche Aussehen haben)

button{ //your code here }

oder wenn es in einer Abteilung ist können Sie es tun, genau wie dieses

.divclass button{ //your code here}

Sie jedes Styling hinzufügen können es wie Hintergrund-Farbe, Farbe, Schriftart-Stil, e . Tc und man kann so etwas wie

.button button { 
 
    background-color: #4CAF50; /* Green */ 
 
    border: none; 
 
    color: white; 
 
    padding: 15px 32px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-size: 16px; 
 
} 
 
.hover button { 
 
    background-color: #4CAF50; /* Green */ 
 
    border: none; 
 
    color: white; 
 
    padding: 16px 32px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-size: 16px; 
 
    margin: 4px 2px; 
 
    -webkit-transition-duration: 0.4s; /* Safari */ 
 
    transition-duration: 0.4s; 
 
    cursor: pointer; 
 
} 
 

 
.button1 { 
 
    background-color: white; 
 
    color: black; 
 
    border: 2px solid #4CAF50; 
 
} 
 

 
.button1:hover { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
} 
 

 
.button2 { 
 
    background-color: white; 
 
    color: black; 
 
    border: 2px solid #008CBA; 
 
} 
 

 
.button2:hover { 
 
    background-color: #008CBA; 
 
    color: white; 
 
} 
 

 
.button3 { 
 
    background-color: white; 
 
    color: black; 
 
    border: 2px solid #f44336; 
 
} 
 

 
.button3:hover { 
 
    background-color: #f44336; 
 
    color: white; 
 
} 
 

 
.button4 { 
 
    background-color: white; 
 
    color: black; 
 
    border: 2px solid #e7e7e7; 
 
} 
 

 
.button4:hover {background-color: #e7e7e7;} 
 

 
.button5 { 
 
    background-color: white; 
 
    color: black; 
 
    border: 2px solid #555555; 
 
} 
 

 
.button5:hover { 
 
    background-color: #555555; 
 
    color: white; 
 
}

<div class="button"><button>Click Me</button></div><br>Hoverable <br> 
 
<div class="hover"> 
 

 
<button class="button button2">Blue</button> 
 
<button class="button button3">Red</button> 
 
<button class="button button4">Gray</button> 
 
<button class="button button5">Black</button> 
 
</div>

für hoverable Taste tun können Sie

Taste tun: Hover {// Hier Code eingeben}

, die Ihr machen Schaltfläche haben unterschiedliche Ansicht, wenn es schwebte und Sie können ein anderes Beispiel finden here

Für runden Knopf Sie border-radius in Ihrem Stil hinzufügen können, kann der Wert

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
.button { 
 
    background-color: #4CAF50; /* Green */ 
 
    border: none; 
 
    color: white; 
 
    padding: 15px 32px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-size: 16px; 
 
    margin: 4px 2px; 
 
    cursor: pointer; 
 
} 
 

 
.button1 {border-radius: 2px;} 
 
.button2 {border-radius: 4px;} 
 
.button3 {border-radius: 8px;} 
 
.button4 {border-radius: 12px;} 
 
.button5 {border-radius: 50%;} 
 
</style> 
 
</head> 
 
<body> 
 

 
<h2>Rounded Buttons</h2> 
 
<p>Add rounded corners to a button with the border-radius property:</p> 
 

 
<button class="button button1">2px</button> 
 
<button class="button button2">4px</button> 
 
<button class="button button3">8px</button> 
 
<button class="button button4">12px</button> 
 
<button class="button button5">50%</button> 
 

 
</body> 
 
</html>

ps in px oder% sein: sorry für schlechtes Englisch und ich ein wenig über CSS vergessen, so einfach versuchen Sie, den oben angegebenen Link zu sehen

Quelle

2017-05-29 03:42:29

Ist nicht das OP fragen, wie man Knöpfe mit abgerundeten Kanten style, wie im Screenshot in der Frage gezeigt? – nnnnnn

Sorry das Bild konnte nicht in meinem Browser geladen werden, um abgerundete Schaltfläche Stil das Beispiel ist verfügbar in den Link, den ich [hier] (https://www.w3schools.com/css/css3_buttons.asp) gegeben habe, aber danke ich wird meinen Beitrag bearbeiten –

-1

Ja. Die Kombination, nach der Sie gefragt haben, kann genau das tun, was Sie wollen.

Quelle

2017-05-29 04:17:03 Joe

, nachdem ich dein Bild gesehen habe, war ich interessiert, dass die Taste zu machen, ich habe es getan, aber vielleicht ist dies nicht das, was Sie suchen, aber ich glaube, Sie mit ihnen spielen können ..

------ css ----------

body{ 
height:1000px; 
background-color: gray; 
} 
.buttonContainer{ 
padding:8px; 
max-width: 350px; 
background-color:#333333; 
color : white; 
margin-left : 200px; 
} 

.button{ 
background-color:#0066ff; 
padding : 8px; 
border:none; 
color:#fff; 
width : 150px; 
height : 40px; 
margin 8px; 
} 
.button1{ 
background-color:#333333; 
width:50px; 
border-radius:40px; 
margin-left:-20px; 
margin-right:-10px; 
weight:3; 
position:absolute; 
z-index:4; 
}

----------- html -------------- -

<body> 
<div class="container"> 
<div class="buttonContainer"><center> 
    <button class='button'><b>LOGIN</b></button> 
    <button class='button button1' disabled>OR</button> 
    <button class='button'><b>SIGNUP</b></button></center> 
</div> 
</div> 
</body>

body{ 
 
height:1000px; 
 
background-color: gray; 
 
} 
 
.buttonContainer{ 
 
padding:8px; 
 
max-width: 350px; 
 
background-color:#333333; 
 
color : white; 
 
} 
 

 
.button{ 
 
background-color:#0066ff; 
 
padding : 8px; 
 
border:none; 
 
color:#fff; 
 
width : 150px; 
 
height : 40px; 
 
margin 8px; 
 
} 
 
.button1{ 
 
background-color:#333333; 
 
width:50px; 
 
border-radius:40px; 
 
margin-left:-20px; 
 
margin-right:-10px; 
 
weight:3; 
 
position:absolute; 
 
z-index:4; 
 
}

<body> 
 
<div class="container"> 
 
\t <div class="buttonContainer"><center> 
 
\t \t <button class='button'><b>LOGIN</b></button> 
 
\t \t <button class='button button1' disabled>OR</button> 
 
\t \t <button class='button'><b>SIGNUP</b></button></center> 
 
\t </div> 
 
</div> 
 
</body>

Quelle

2017-05-30 14:23:52

Buttons Formen möglich mit PHP/CSS/HTML?

Antwort

Verwandte Themen