Django 中的按钮样式

Question

按钮应该是一个小的垂直矩形，顶部宽度应该突出一点。压前应为白色，压后为深红色。 当指针滑过此按钮时，应显示文本“添加”，删除时应显示“删除”。 然而，它只是一个矩形，甚至它的名字从添加到删除都没有改变（颜色和样式也没有改变）。

预先感谢您的想法:)

product_detail.html：

<form method= "get" action = "{% url 'add' product.id %}">
    {% csrf_token %}
    <button clasa="bottonwatch" type = "submit" value = "{{ product.id }}"  name = "productid">
        <div class="addwatch">
            {% if product.watch_list %}
                addWatchlist
        </div>
        <div class="removewatch">
            {% else%}
                remove
        </div>
        {% endif %}
    </button>
    
</form>

风格：

.bottonwatch {
    border-radius: 50%;
    height: 2.5rem;
    min-width: auto;
    padding: 0;
    width: 2.5rem;
}

.addwatch {
    color: black;
    background-color: white;
}

.remove{
    color: white;
    background-color: rgb(100, 36, 36);
}

views.py：

@login_required(login_url="login")
def add(request, productid):
    product_id = request.GET.get('productid', False)
    watch = Watchlist.objects.filter(user = request.user.username)


    for items in watch:
        if (items.watch_list.all) == int(productid):  
            return watchlist(request, request.user.username)
        else:
            return remove(request, productid)
    

   new_watch = Watchlist(product_id, user=request.user.username)
   new_watch.save()
   messages.success(request, "The product has been added to your WatchList.")
   return product_detail(request, productid)


@login_required(login_url="login")
def remove(request, pid):
    list_ = get_object_or_404(Watchlist, pk = pid)
    messages.success(request, "The product was removed from your WatchList.")
    list_.delete()
    return redirect("index")

Answer 1

您需要根据条件以不同的方式构建按钮文本。

.buttonwatch {
    border-radius: 5px; /* Adjust as needed */
    height: 40px; /* Adjust as needed */
    min-width: 40px; /* Adjust as needed */
    padding: 5px 10px; /* Adjust as needed */
    cursor: pointer;
    border: none;
    outline: none;
    position: relative;
}

.addwatch {
    color: black;
    background-color: white;
    transition: background-color 0.3s ease;
}

.addwatch:hover {
    background-color: lightgray; /* Change the color on hover */
}

.buttonwatch:active .addwatch {
    background-color: crimson; /* Change color when pressed */
    color: white; /* Change text color when pressed */
}

<form method="get" action="{% url 'add' product.id %}">
    {% csrf_token %}
    <button class="buttonwatch" type="submit" value="{{ product.id }}" name="productid">
        <span class="addwatch">
            {% if product.watch_list %}
                Remove
            {% else %}
                Add
            {% endif %}
        </span>
    </button>
</form>

更正 HTML 和 CSS 中的 CSS 类名称。该结构应该是按钮内的跨度元素，以允许根据条件动态更改文本。此外，使用类 addwatch 将样式应用于范围以更改背景和文本颜色。