CODEWITHSUNDEEP
css
Nick jones
Nick jones

Reputation: 83

How to write CSS for outline in button as class="btn btn-outline-primary" not working?

I have the following code for Button

Example 1

<button type='submit' class = 'btn btn-success' name='submit'>Logout<i style='margin-left:10px;' class='fas fa-sign-out-alt' aria-hidden='true'></i></button>

Example 2

<div class='btn-group'>                            
<button type="submit" name="showNotBillableEntry" class="btn btn-primary" style='border-radius: 8px; '><i class='fa fa-eye' style='margin-right:10px;'></i>Not Billable Entries
</button>
</div>

But when i changes the class btn btn-primary to btn btn-outline-primary, button become grey not outline as in bootstrap reference explained. Earlier they were green in color due to class btn btn-primary.

I want to use this <button type="button" class="btn btn-outline-primary">Primary</button> but it is not working.

Referring bootstrap - https://getbootstrap.com/docs/4.0/components/buttons/

I need help in css becoz the bootstrap link says to use type='button' in place of type='submit' but i can't use that as this button contain some data to be submitted to php server.

I have also included links which are needed for use in bootstrap.

Upvotes: 1

Views: 4579

Answers (2)

Janak Poojary
Janak Poojary

Reputation: 11

You can modify this as per your need. This is directly from the bootstrap's stylesheet

.btn-outline-primary{color:#007bff;border-color:#007bff}
.btn-outline-primary:hover{color:#fff;background-color:#007bff;border-color:#007bff}
.btn-outline-primary.focus,
.btn-outline-primary:focus{box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}
.btn-outline-primary.disabled,
.btn-outline-primary:disabled{color:#007bff;background-color:transparent}
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,.show>
.btn-outline-primary.dropdown-toggle{color:#fff;background-color:#007bff;border-color:#007bff}
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,.show>
.btn-outline-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}

Upvotes: 1

Pushprajsinh Chudasama
Pushprajsinh Chudasama

Reputation: 7949

You can do it like this.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<button type="submit" class="btn btn-outline-primary" style="font-size:30px;">Primary</button>

Upvotes: 3

Related Questions