按钮形状可能与PHP/CSS/HTML？

-2

我正在创建一个登录表单，并希望有很好的按钮。我在网上看到了这些按钮的一个例子。这可能与html/css/php？按钮形状可能与PHP/CSS/HTML？

2017-05-29 Rowan Richie

是的，这是可能的 – user2182349

是的。两个按钮+ CSS。 –

请阅读[“我如何问一个好问题？”]（https://stackoverflow.com/help/how-to-ask）并相应地编辑您的问题。 –

，可以使用带有CSS HTML/PHP，只需将这些行添加到您的CSS代码（假设按钮不在一个部门，所有的按钮都会有相同的外观）

button{ //your code here }

或者如果它是在一个部门，你可以这样做只是这样

.divclass button{ //your code here}

你可以有添加任何造型像背景颜色，颜色，字体风格，E 。TC ，你可以这样做

.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>

为hoverable按钮，你可以做

按钮：悬停{//你的代码在这里}

，可以使你按钮有不同的看法，当它徘徊，你可以找到另一个例子here

对于圆角按钮，你可以在你的风格添加border-radius，该值可以在像素或百分比

<!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：抱歉的英文不好，我有点忘了CSS，所以才试着看看我上面给出的链接

来源

2017-05-29 03:42:29

是不是OP询问如何在问题的屏幕截图中显示带有弯曲边缘的按钮样式？ – nnnnnn

对不起，图像未能在我的浏览器中加载，以风格舍入按钮的例子是可用的链接我已经[在这里]（https://www.w3schools.com/css/css3_buttons.asp），但谢谢我将编辑我的帖子 –

-1

是的。您询问的组合可以完全按照您希望的方式进行。

来源

2017-05-29 04:17:03 Joe

我看过你的图片后，我很感兴趣，以使该按钮时，我已经做到了，但也许这是不是你要找的内容，但我认为你可以和他们一起玩..

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

来源

2017-05-30 14:23:52

按钮形状可能与PHP/CSS/HTML？

回答

相关问题