Question

我正在创建一个登录表单，并希望有漂亮的按钮。我在网上看到了这些按钮的例子。用html / css / php可以吗？

Answer 1

可以使用hss / php和css，只需将这些行添加到您的css代码中（假设按钮不在分区中，所有按钮都具有相同的外观）

button{ //your code here }

或者如果它在某个部门，你可以像这样做

.divclass button{ //your code here}

你可以添加任何样式，如背景颜色，颜色，字体样式等。你可以做点什么

＆＃13;

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

＆＃13;

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

＆＃13;

对于你可以做的hoverable按钮

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

可以使您的按钮在悬停时具有不同的视图你可以找到另一个例子here

对于圆角按钮，您可以在样式中添加border-radius，值可以是px或％

＆＃13;

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

＆＃13;

ps：抱歉英语不好而且我有点忘了css，所以试着看看我上面给出的链接

Answer 2

在我看到你的照片之后，我有兴趣制作那个按钮，我已经完成了它但也许这不是你想要的，但我想你可以和它们一起玩。。

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

from rest_framework import serializers
from .models import Attendance
from django.core.files.base import ContentFile
import base64
class Base64ImageField(serializers.ImageField):
    def to_internal_value(self, data):
        from django.core.files.base import ContentFile
        import base64
        import six
        import uuid
        print("ininternal")
        # Check if this is a base64 string
        if isinstance(data, six.string_types):
            # Check if the base64 string is in the "data:" format
            print("ininstance")
            if 'data:' in data and ';base64,' in data:
                # Break out the header from the base64 content
                header, data = data.split(';base64,')

            # Try to decode the file. Return validation error if it fails.
            try:
                decoded_file = base64.b64decode(data)
            except TypeError:
                self.fail('invalid_image')

            # Generate file name:
            file_name = str(uuid.uuid4())[:12] # 12 characters are more than enough.
            # Get the file name extension:
            file_extension = self.get_file_extension(file_name, decoded_file)

            complete_file_name = "%s.%s" % (file_name, file_extension, )

            data = ContentFile(decoded_file, name=complete_file_name)

        return super(Base64ImageField, self).to_internal_value(data)

    def get_file_extension(self, file_name, decoded_file):
        import imghdr

        extension = imghdr.what(file_name, decoded_file)
        extension = "jpg" if extension == "jpeg" else extension

        return extension

class AttendanceSerializer(serializers.ModelSerializer):

    attendance_pic = Base64ImageField(
        max_length=None, use_url=True,
    )

    class Meta:
        model = Attendance
        fields = ('__all__')

----------- HTML ----------------

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

是。您询问的组合可以完全按照您的要求进行。

使用php / css / html可以设置按钮形状？

3 个答案: