Guide on how to eliminate the click effect from a Bootstrap 4 button

I have been struggling with the issue of removing the box-shadow effect from Bootstrap 4 buttons. I searched for solutions on various forums but couldn't find one that worked for me. So, I decided to try some custom CSS code I found online. I was able to remove the blue box-shadow effect on button click, but I noticed that the button was resizing back to its original size after being clicked, which is not what I wanted.

Here is my CSS:

#ok_but {
    background-color: #50506F;
    border-color: #50506F;
}
#ok_but:hover   {
    background-color: #3C3C52;
}

.btn-primary.focus, .btn-primary:focus {
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
    outline: 0;
}

And here is my HTML:

<button id="ok_but" class="btn btn-primary btn-block" name="login">
    Login
</button>
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

If you're still struggling with your coding issue, feel free to share the link and a snapshot of the problem. I'll be happy to help. Best of luck and happy coding! :)

.btn-primary:hover,.btn-primary:focus,.btn-primary:active, 
.btn-primary:active:focus:not(:disabled):not(.disabled),
.btn:focus, .btn:active, .btn:hover{
    box-shadow: none!important;
    outline: 0;
}

Answer №2

To maintain the default Bootstrap appearance without the need for extra CSS classes or modifications, simply add the shadow-none class to your button. This way, you can preserve the original Bootstrap look and feel while still achieving the desired effect.

<button id="ok_but" class="btn btn-primary btn-block shadow-none" name="login">
    Login
</button>

However, if you do wish to customize the default Bootstrap styling, consider adjusting the variables in Bootstrap SCSS, utilizing Bootstrap class utilities similar to the Tailwind CSS framework, or manually rewriting Bootstrap classes like .btn. If you are unable to access the SCSS file directly and are including the bootstrap.css in your HTML, then overriding the compiled SCSS classes as mentioned by Bharat Makvana in his answer may be the best approach.

Answer №3

Here is the solution you were looking for: https://jsfiddle.net/Nethravathi/zsm54ptw/6/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Sign In 

#ok_but:hover{
background-color: #007bff;
border-color: #007bff;

}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Generate an image, PDF, or screenshot of a webpage with the click of a button

I've been searching for a solution that would enable users to click a button and save an image or PDF of the current page. The content on the page is dynamic and dependent on user input, resulting in sequences displayed in various colors. I'm loo ...

phpjavascriptjqueryhtmlajax

What type of layout engine is used to determine the positioning of HTML elements on a webpage?

I am currently working on a web data classification project and I'm interested in obtaining the coordinates of HTML elements as they are displayed in a web browser, without considering any CSS or JavaScript present on the webpage. I primarily use C++ ...

c++htmlwebkitgecko

Transform a hexadecimal string into a hexadecimal color representation within SCSS

I have a plethora of colors stored in JSON format. I am utilizing rootbeer with gulp to convert them into Sass maps for processing by SCSS: { "blue": "33A2FF" } into $colors: ( "blue": "33A2FF" ); I am able to use ...

cssjsonsasscolorslibsass

Guide to continuously play the animation, Version 2

I have been struggling with an animation that I need to loop indefinitely. The problem arises when trying to use animation-iteration-count: infinite. It seems like no matter where I place it in the code, whether within the keyframes or normal CSS rules, it ...

htmlcssloopsanimation

Having trouble retrieving the text of an element using Selenium

Looking at the DOM element provided: <span class="styles__Content-rlm06o-1 ixoRjG">20.00000000</span> I am attempting to extract the value 20.00000000 using the following Python code: text = driver.find_elements_by_xpath("//*[@c ...

pythoncssseleniumselenium-webdriverxpath

Need a tool for validating forms?

I am currently facing some confusion with the UI Validation plugin that we are using. Within our application, we employ Spring MVC, Jquery & Bootstrap. As we delve into UI development, we have encountered uncertainty in selecting an appropriate Validation ...

javascriptjqueryformstwitter-bootstrapvalidation

Tips for formatting text in a way that allows it to flow down a page smoothly as the

Working within a CSS Grid setup, I have an image on the left and a block of text on the right. As I reduce the page width, both the image and text resize accordingly to fit the page width. However, once the width goes below 475px, the layout breaks and the ...

htmlcssresponsive-designcss-gridresponsive-images

Switching CSS styles - seeking a smoother integration

I have successfully implemented a JS CSS switcher, which works brilliantly. However, I would like it to function more seamlessly. When opening a new page on the site, the default CSS style sometimes flickers briefly before the selected CSS style is reappli ...

javascripthtmlcss

JavaScript animation is not functioning as expected

I created a div with the id of "cen" and gave it a height and width of 50px. $(document).ready(function() { $("#cen").animate({ height: 500px, width: "500px", }, 5000, function() { // Animation complete. }); }); Unfort ...

javascriptjqueryhtmlcssjquery-animate

Decoding Labels for Content

Recently, I've been working on a VBA script that scrapes company reporting dates from the London Stock Exchange website. However, I encountered an issue as they have made changes to their web query interface. So, I've been trying to tweak the scr ...

htmlexcelvbatags

What is the best way to display multiple files in a vertical stack when choosing a file?

<div class="selected-file-container align-items-center justify-content-between d-none"> <div class="selected-file d-flex align-items-center"> <img id="selectedImage" class="hidden" src="&qu ...

javascripthtmlcss

Arrange the items in the Navbar

Can someone please help me with a glitch I'm experiencing that is causing my Navbar items to not align properly? (See Navbar preview) I have attempted to fix it by adjusting the margin and padding manually, but my lack of Bootstrap knowledge has hin ...

htmlcssdjangobootstrap-4navbar

What is preventing me from using jQuery to dynamically insert HTML onto the page?

Below is the HTML code for a Bootstrap Modal dialog box: <div class="modal fade" id="rebateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> ...

javascriptjqueryhtmlajaxtwitter-bootstrap

Can the sidebar in Vue be toggled using a method?

In a <b-table>, I want to add an action button to each item: <b-table :items="data" :fields="fields"> <template v-slot:cell(actions)="data"> <b-button v-on:click="doSomething(data.index)"&g ...

javascriptvue.jsbootstrap-4bootstrap-vue

Angular 7 - Customize Mat-select-value color depending on a specific condition

One issue I am facing is changing the color of a selected value in a mat select based on a condition. This change should be visually apparent to the user. Although accessing mat-select-value from the styles is possible, implementing a condition using ng-cl ...

cssangularangular-material

What is the best way to format text within the _e() function in WordPress?

As I work on developing a basic plugin, I encountered the following line of code: echo "<p style=\"color:red;\">Please enter a valid email address!</p>"; I aim to make this plugin easy to localize and internationa ...

phpcsswordpressplugins

Utilizing the powerful combination of TailwindCSS and Next.js Image to achieve a full height display with

Trying to utilize the Next.js' <Image> component with the layout=fill setting, I created a relative div housing the Image tag. However, I am looking for a way to set the height based on the Image's height. Came across this example, but the ...

cssnext.jstailwind-cssnextjs-image

Border utilities in Bootstrap 4 provide easy ways to add borders

I have been searching for a solution, but I can't seem to find it. Bootstrap 4 offers utility classes for adding and removing borders, but is there a way to define the border width or style like solid or dashed? <span class="border"></span&g ...

htmlcsstwitter-bootstrapbootstrap-4

The divs contained are misaligned and not properly centered on the page

My container div contains 6 inner divs, but they are not properly centered on the page. Although the divs are equally spaced apart, they seem to be shifted to the left. I tried using 'justify-content: center' without success, and I suspect it mi ...

htmlcss

Accurately replicate the Logout functionality of asp:Login within the siteMap

How can you effectively integrate/simulate the Logout feature in asp:Login for a siteMapNode? <asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false"> <AnonymousTemplate> <%--[ <a href ...

c#htmlasp.netsitemaplogout