CSS Styles Not Applying to Button: How to Remove Blue Highlight on Click?

I am developing a web application via pycharm using html, css, and js. Currently I am having issues with the upload button, which is intended to trigger the upload of source code. I am still learning but I could not find a solution.

The issue when you click and hold the “Upload” button, it exhibits an unwanted visual behavior where it turns blue. Granted I do not have to hold it down but even when clicking for a brief moment there is blue.

upload button gif

This is the css code that I have:

.btn-primary {
    background-color: #fc3e00;                       
    border: none;                                    
    border-radius: 5px;                              
    transition: background-color 0.3s ease, transform 0.2s ease; 
    color: white;                                    
    appearance: none;                                
}

.btn-primary:hover {
    background-color: #b80c09;                       
}

.btn-primary:focus {
    outline: none !important;                        
    box-shadow: none !important;                     
    background-color: #b80c09;                       
}

.btn-primary:active {
    background-color: #b80c09;                       
    transform: scale(0.95);                           
    box-shadow: none !important;                      
}

This is the HTML:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap Link -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

    <!-- CSS Link -->
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">

    <!-- Font Link -->
    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,100i,300,300i,400,400i,500,500i,700,700i"
          rel="stylesheet"/>
    <!-- Project Name -->
    <title>Viewie - Source Code Visualizer</title>
</head>
<body>
    <div class="container">
        <h1 class="text-center mt-4">Welcome to Viewie: A Code Source Visualizer!</h1>
        <h2 class="text-center mt-4">Input your Python, Javascript, or Java Code :D</h2>
        <form id="codeForm" class="mt-4">
            <div class="form-group">
                <textarea class="form-control" id="code" rows="10" placeholder="Please upload your source code :)"></textarea>
            </div>
            <button type="submit" class="btn btn-primary">Upload</button>
        </form>
        <div id="output" class="mt-4"></div>
        <div id="umlDisplay" class="mt-4"></div>
    </div>

    <script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>

I did try setting the outline as none and the box-shadow but that has not worked. Ive seen on here that same solution for mobile but I havent seen anything for non-mobile, unless I am blind. I have also refreshed the page and the application. Ive also tried a different browser as Im currently using Firefox.

Solution

You also need to add !important to the colors in the css file. So the button appearance will be correct.

.btn-primary {
    background-color: #fc3e00 !important;                       
    border: none !important;                                    
    border-radius: 5px;                              
    transition: background-color 0.3s ease, transform 0.2s ease; 
    color: white;                                    
    appearance: none;                                
}

.btn-primary:hover {
    background-color: #b80c09 !important;                       
}

.btn-primary:focus {
    outline: none !important;                        
    box-shadow: none !important;                     
    background-color: #b80c09 !important;                       
}

.btn-primary:active {
    background-color: #b80c09 !important;                       
    transform: scale(0.95);                           
    box-shadow: none !important;                      
}

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap Link -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

    <!-- CSS Link -->
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">

    <!-- Font Link -->
    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,100i,300,300i,400,400i,500,500i,700,700i"
          rel="stylesheet"/>
    <!-- Project Name -->
    <title>Viewie - Source Code Visualizer</title>
</head>
<body>
    <div class="container">
        <h1 class="text-center mt-4">Welcome to Viewie: A Code Source Visualizer!</h1>
        <h2 class="text-center mt-4">Input your Python, Javascript, or Java Code :D</h2>
        <form id="codeForm" class="mt-4">
            <div class="form-group">
                <textarea class="form-control" id="code" rows="10" placeholder="Please upload your source code :)"></textarea>
            </div>
            <button type="submit" class="btn btn-primary">Upload</button>
        </form>
        <div id="output" class="mt-4"></div>
        <div id="umlDisplay" class="mt-4"></div>
    </div>

    <script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>