Unable to implement a floating button in Django template

Question

I am trying to create a floating button as shown in this video. However I am unable to implement the same. I am basically tying to add this to one my django templates.

Here is the code of the HTML:

{% extends "base.html" %}
{% load bootstrap4 %}
{% block content %}
<button  class="material-icons floating-btnz">Add</button>

Some more code here

{% endblock %}
<style>
    .floating-btnz{
        width: 80px;
        height: 80px;
        background: #009879;
        display: flex;
        border-radius: 50%;
        color: #ffffff;
        font-size: 40px;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        box-shadow: 2px 2px 5px rgba(0,0,0, 0.25);
        outline: blue;
        border: none;
        cursor: pointer;
    }
</style>

I have included the material icon cdn in my base.html. It seems to me that the cdn is not working. Upon checking in the web console, the css is loading but not showing up on the button. Where am I going wrong? Any help is appreciated.

Dang missed it. Thanks william! – DHRUV KAUSHAL Feb 16 '20 at 12:34 — DHRUV KAUSHAL, Feb 16 '20 at 12:34

score 1 · Accepted Answer · answered Feb 16 '20 at 12:37

If you wrote the <style> outside blocks, then it will not be rendered, so you should render it inside a block.

Note that prior to html-5.2 one could only put the <style> tag to be in the <head> block. As of HTML 5.2 one is allowed to put that in the <body> tag as well, but still it might be better to do this in the <head>, since some older browsers might not accept that.

{% extends "base.html" %}
{% load bootstrap4 %}
{% block header %}
<style>
    .floating-btnz{
        width: 80px;
        height: 80px;
        background: #009879;
        display: flex;
        border-radius: 50%;
        color: #ffffff;
        font-size: 40px;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        box-shadow: 2px 2px 5px rgba(0,0,0, 0.25);
        outline: blue;
        border: none;
        cursor: pointer;
    }
</style>
{% endblock %}

Unable to implement a floating button in Django template

1 Answers1