Hiding one of the button, is it a good method?

Question

So I wanted to create a login form. I am using Bootstrap (using CDN) to style my form quickly. I initially gave my button the classes .btn .btn-danger .btn-lg. But as the device width got smaller, I needed a smaller button, but I don't know a way to turn off .btn-lg and turn on .btn-sm if the device width is smaller. So I created two buttons with the same text and properties, if the device width is smaller than 767px I set display: none; for the .btn-lg and the same for the .btn-sm if width is greater than 768px. This is working fine as far as the front-end is concerned. I want to know if this is a good practice and will it pose me problems in the future of development. Here's the snippets of my code: HTML:

<form class="form-group">
    <input type="text" class="form-control" name="user" placeholder="Username" required>
    <input type="password" class="form-control" name="pwd" placeholder="Password" required>
    <p>Forgot your password?</p>
    <button type="submit" class="btn btn-danger bg-gradient btn-lg">LOG IN</button>
    <button type="submit" class="btn btn-danger bg-gradient btn-sm">LOG IN</button>
</form>

CSS:

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.btn-danger {
    background-color: orangered;
    color: white;
}

.btn-lg {
    border-radius: 30px;
    display: none;
}

.btn-sm {
    border-radius: 30px;
}

@media screen and (min-width: 768px) {
    .btn-lg {
        display: block;
        margin: auto;
    }

    .btn-sm {
        display: none;
    }
}

Answer 1

I believe it depends on the case, but I personally prefer to only have one element for it. Below is one of a possible solution, which might be not for everyone:

<button type="submit" class="btn m-0 p-0">
    <span class="btn btn-danger btn-sm d-md-none">BTN</span>
    <span class="btn btn-danger btn-lg d-none d-md-inline">BTN</span>
</button>

---

I'm assuming the main issue of your question is more about different button styles for each viewport sizes, and not about the functionality of the button itself. Bootstrap have these "Display property notation" and "Layout breakpoints" that can be useful for handling elements on viewport changes.

The children of the button is where the styling of the button happens:

• Viewport less than 768px This <span class="btn btn-danger btn-sm d-md-none">BTN</span> element will be hidden when the viewport size is >=768px with the help of d-md-none.
• Viewport bigger or equal than 768px The other <span class="btn btn-danger btn-lg d-none d-md-inline">BTN</span> element will appear only when the viewport size is >=768px with the help of d-none d-md-inline.

The working sample can be seen here. Adjust your browser width to see the result.

The solution that I provided above don't need additional custom styles to handle viewport changes and there's only one button to work with. In my opinion it's simpler and easier to maintain.