-1

I have created a new ASP.Net Core 5 application which comes with Bootstrap. I want to create a full copy of btn-primary button but with a new color. I don't want to replace btn-primary.

I see that bootstrap.min.css and bootstrap.bundle.min.js are imported.

What is the correct way to create a new button and release it as part of the build?

user3807918
  • 315
  • 2
  • 19

2 Answers2

1

Just add a new class after the btn-primary class like

<button type="submit" class="btn-primary red_button">Submit</button>

And then create a new stylesheet having the newly created class styling like

.red-button {
    background-color: red;
}

writing your own class and include it after bootstrap class.

Masood
  • 1,545
  • 1
  • 19
  • 30
Rounak Khan
  • 21
  • 5
0

this is only using css, there are better ways to do it using sass or building a copy of btn-default

Just add an extra class modifier like mybtn

.mybtn{
        background-color: pink!important;
        
}
.mybtn:hover{ background-color: #fa7aa0!important; color: white!important;}
.mybtn:active{
    background-color: #E75480!important;
    color: white!important;
        
}
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
 
</head>
<body>

<div class="container">
  <button type="button" class="btn btn-default mybtn">Custom BTN</button>
</div>

</body>
</html>
SirHectorin
  • 177
  • 11