Resizing Buttons In Django HTML Template

Using Django Templates & Frontend
1

Hello all.

I have designed a button called “Facial Recognition Login” inside an HTML template by using CSS code.

The CSS code is located inside the ‘static’ directory which I have loaded into the HTML template called “login.html”.

What I am trying to do is to make the button much smaller.

As visible in the following image, the button titled “Facial Recognition Login” is far too large.

facia-image-button
facia-image-button1348×634 52 KB

The following is inside the “login.html” template:

<script src="index.js" defer></script>
<a href="{% url 'facial-login' %}" 
  class="facial-login-button">Facial Recognition Login</a>

The following is the css file titled “facial-login-button.css”:

body {
    font-family: system-ui;

    /*Set the background colour.*/
    background: hs1(200 50% 5%);

    min-height: 100vh;
    display: grid;

    /*Setting 'place-items' to 'center' will place the button in the
      horizontal and vertical center of the web page.*/
    place-items: center;
}

/*The name here must match the name used in the class for the
  button that we are trying to style.*/

.facial-login-button 
{
    /*In order to center items vertically and horizontally with 'place-items'
      we must set 'inline-flex' to the 'display' property.*/
    display: inline-flex;
    place-items: center;
    position: relative;
    isolation: isolate;

    /*Setting 'appearance' to 'none' will suppress the native styles
      so that CSS can be used to fully restyle the native form controls.*/
    appearance: none;

    /*Setting 'pointer' to cursor will display a mouse hand when hovering
      over the button.*/
    cursor: pointer;
    font-size: 1rem;
    padding: 1em 1em;
    /*Make the button text uppercase.*/
    text-transform: uppercase;
    background-color: transparent;
    color: hsl(200 90% 55%);

    /*Set the colour for the border around the button. 'currentColor'
      refers to the value set for the 'color' property above.*/
    border: 5px solid currentColor;
    /*Setting the '0.125em' to 'border-radius' will give the button 
      soft edges for each of its four corners.*/
    border-radius: 0.125em;
    /*Setting 'hidden' to 'overflow' will prevent the circle generated
      from clicking on button, from being displayed outside the box of
      the button.*/
    overflow: hidden;
}

.facial-login-button::after
{
    /*The 'content' property must be included because this is a
      pseudo element in CSS.*/
    content: "";
    position: absolute;

    top: var(--x);
    left: var(--y);

    /*We must set 'translate(-50%, -50%) to 'transform', so that
      the mouse pointer is in the center of the circle. 'scale(0)'
      will make the circle disappear so it is now shown in the background.*/
    transform: translate(-50%, -50%) scale(0);

    /*Setting 'transform 500ms' to 'transform' will expand a circle surrounding
      the mouse pointer whilst the user clicks the button. When the button is
      released, the circle will shrink back to the point where it is no longer visible.*/
    transition: transform 500ms;

    /*Setting -1 to 'z-index' will put the circlelike bubble behind the text.*/
    z-index: -1;
    display: block;
    width: 160%;
    aspect-ratio: 1 / 1;

    /*Setting 50% to 'border-radius' will create a circlelike bubble that 
      ripples out upon clicking the button.*/
    border-radius: 50%;
    background: #fff;
    opacity: 0.5;
}

.pulse::before {
    animation: pulse 500ms;
}

@keyframes pulse
{
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

The problem is that even after I assigned “1rem” to “font-size”, the size of the “Facial Recognition Button” has not changed. Any ideas on how I could make the button smaller?

2

One approach you could take would be to use your browsers developer tools to identify what CSS is affecting the formatting of that button. That should help you narrow down what CSS settings are causing this.

3

You mean by Inspecting the web page and then going into Elements and then Styles?
Inspect → Elements → Styles

4

Correct. Once you’ve identified what elements apply, you can then make changes in that panel to experiment with the settings to see what’s going to give you the desired results.

5

Although if I play around with each feature inside the “facial-login-button.css” file, wouldn’t that also do the trick?

6

Maybe.

The issue is that the appearance of an object can be influenced by multiple settings in multiple files. Just changing one file may not have the desired effect if there are other files involved affecting the styling of an element.

The value of using the browser’s developer tools is that it makes those interactions more apparent. It also lets you more easily check the containers for an element to see what styling effects may be caused by that enclosing element.

7

Yes Mr. Whitesell! Thank you very much indeed!

I was able to change the size of the button by going to Inspect → Sources → facial-login-button.css.

I changed the value of “font-size” inside “facial-login-button.css” through “Sources”. Then I re-saved the file through “Sources” in the web page and saved it with the same name as well as the same file location.

However, another issue is that the button does not have a ripple effect when I click it. Whereas in the following example, it does:

What could be the cause of this?

The following is what I am seeing through Inspect → Console:

uncaught
uncaught1362×653 68.8 KB

I think the issue is likely that inside “Console” there is an error saying “Uncaught TypeError: Cannot read properties of null (reading ‘addEventListener’)”.
typeerror

Inside the login.html file, I loaded in the “facial-login-button.js” file with the following lines of code:

{% load static %}

<head>
    <script src="{% static '/js/facial-login-button.js' %}" type="text/javascript"></script>
</head>
8

The error message you’ve posted is saying that the problem is occuring on line 16 of facial-login-button.js.

This may or may not be related to the problem you’re showing here. (Not all errors in JavaScript are “fatal”.)

Is that a JavaScript file you’ve written or is it a third-party library? If you didn’t write this, you’ll need to review the documentation to verify that you’re using it correctly, and possibly check their issues list to see if this is a known problem.