Disable CSS hover transition when the mouse is released

I have designed a CSS button with a unique effect - the background color fades lighter on mouseover and immediately becomes darker on mousedown. However, I am facing an issue where I want to keep the button's hover state even after the mouseup event without repeating the transition. Is there a way to achieve this?

.btn1 {
    background-color: #08f;
    border-top: 0;
    border-right: 0;
    border-bottom: 3px solid #048;
    border-left: 0;
    border-radius: 20px;
    color: #fff;
    font-size: 16pt;
    padding: 10px 20px;
    transition: background-color 0.5s;
}
.btn1:hover {
    background-color: #0cf;
}
.btn1:active {
    background-color: #048;
    border-top: 3px solid #fff;
    border-bottom: 0;
    color: #888;
    transition: background-color 0s;
}
<body>
    <button class="btn1">Click Me</button>
</body>

csscss-transitions

Answer №1

Adjust the active state using a CSS animation that persists

.btn1 {
    background-color: #08f;
    border-top: 0;
    border-right: 0;
    border-bottom: 3px solid #048;
    border-left: 0;
    border-radius: 20px;
    color: #fff;
    font-size: 16pt;
    padding: 10px 20px;
    transition: background-color 0.5s;
}
.btn1:hover {
    background-color: #0cf;
}
.btn1:active {
    border-top: 3px solid #fff;
    border-bottom: 0;
    color: #888;
    animation: activate 0.1s forwards;
}

@keyframes activate {
    from {background-color: #0cf;}  
    to {background-color: #048;}  
}
<body>
    <button class="btn1">Button</button>
</body>

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

Update the color scheme of a striped table in Bootstrap 4 beta (currently the latest version)

My table is designed with stripes using the following code: <table class="table-sm table-hover table-striped"> <thead> <tr> <th>#</th> <th>First Name&l ...

csstwitter-bootstrapbootstrap-4

SCSS mixins in Zurb Foundation 4 designed for creating small and large columns that are fluid and responsive

Currently in the process of developing a responsive website for my company, I am utilizing SASS and Foundation 4 CSS Framework for the first time. Progress has been smooth thus far. However, I have encountered an issue related to mixins. class="large-6 s ...

htmlcssresponsive-designsasszurb-foundation

Enclose the text entered by the user within a newly created element inside a contentEditable division

My current setup includes a contentEditable div like this: <div id="content" contentEditable="true"></div> What I want to achieve is for any text typed by the user to be automatically wrapped within div or p tags. While I can add HTML code to ...

javascripthtmlcss

Show the components of an associative array with a click of a button

I have a total of four div elements and array elements. My goal is to link these two components together effectively. Specifically, when a user clicks on the first div element with the class .news, I want to display the values of the first element in the ...

javascripthtmlcss

Tips for creating semi-circular shapes using CSS gradients

I am trying to design a div element with a background made up of two colors divided by a half circle: My preference is to use gradients for easier animation purposes. I am looking to avoid using pseudo-elements or border-radius, and my HTML structure limi ...

cssbackground-imagegradient

The vertical navigation pills in Bootstrap 4 are not functioning properly as anticipated

I've been referring to the bootstrap 4 documentation for my project. After copying and pasting the code snippet for vertical pills, I noticed it wasn't functioning correctly. Instead of displaying text next to the buttons, it was appearing belo ...

javascripthtmlcssbootstrap-4

Mobile users unable to view Bootstrap modal

I am experiencing an issue with a login screen inside a modal that is triggered by clicking on an anchor link in the menu. <a href="#" data-toggle="modal" id="openLoginPopUp" data-remote="/Resources/Widgets/firstloginPopup.htm" data-target="#loginModal ...

jqueryhtmlcsstwitter-bootstrap

Display a div using Jquery when hovering over it with several classes

I want to create a hover effect where div2 fades in slowly when hovering over div1 within the same container. However, my jQuery code doesn't seem to be working as expected... $(".div").hover(function() { $(this).find(".div2").animate({ opac ...

javascriptjqueryhtmlcss

Don't pay attention to CSS that is outside of the div

Currently, I am attempting to populate a div with templates in order to preview them. These templates are sourced from a database and configured using php. My issue lies in the fact that certain entries consist of entire websites (complete with a head and ...

htmlcss

Is it possible to use Bootstrap without using rows?

I am a fan of using bootstrap, but I am currently facing a challenge that requires a grid layout where cells stack vertically without any visible lines separating them. Similar to the layout seen on Pinterest. While Bootstrap's normal grid system wor ...

csstwitter-bootstrap

Is there a way in CSS to set a label's width equal to the width of its content?

I am facing an issue where I need the question mark div to be positioned right next to the top row of text in the label it is associated with. Can someone suggest some styles that can be applied to the label to adjust the width and spacing so that it match ...

htmlcssflexbox

Ways to enlarge a div and its contents when hovering over it?

I am struggling to create a div that expands on hover and have been unable to make the content expand along with the div. I've experimented with various overflow options, but none of them seem to work. .grow { padding: 5px 5px 5px 5px ...

htmlcssexpand

Is it permissible to use a "stand alone" display property of "table-cell" on a div?

update: revised based on feedback: I inquired because I couldn't locate any documentation specifying where display:xxxx; is permitted. My curiosity stems from a belief that a rendering engine can interpret the concept of rendering a rectangle as a t ...

htmlcss

Executing an AJAX request when the window is closed using jQuery

I have a clear question: how can I trigger an ajax call when the user clicks on the browser close button, but before actually closing the window? Are there any possible solutions for this specific scenario? I do not want any confirmation boxes - just a w ...

javascripthtmlcssajaxbrowser

Prevent Child Elements from Overstretching Container with Bootstrap Flex

I'm working on a layout where all elements can be viewed without the need for scrolling. Any panels that require more space should be scrollable. In the following example, I want the contents of main-left to be scrollable without stretching the entire ...

javascripthtmlcssbootstrap-4flexbox

Icon shrinking when de-hovered via JQuery, Javascript, and CSS techniques

Looking for a way to make three social icons grow on hover and then gradually shrink back when the user stops hovering? Wondering if there's a solution using JavaScript, CSS, or jQuery? ...

javascriptjquerycsshover

Tips for setting up the image as the header background in HTML5 and CSS3

I am currently designing a website. I'm wondering if there is a way to create a div with a curved bottom using HTML5, CSS3 and JavaScript. It should resemble the design of the curved header bottom ...

javascriptjqueryhtmlcss

Change the color of the text based on which classes the visitor is currently viewing on the page

I have a sidebar menu in plain html for page navigation, like this: <div class="sidebar"><h2>About us</h2> <h3><a href="#chapter1" class="link">Chapter 1</a></h3> <h3><a href="#chapter2" class="link"> ...

javascriptjqueryhtmlcss

What is the best way to remove a scrolling event handler from a particular element or class in JavaScript?

My goal is to set up a Table of Contents (TOC) in Obsidian that remains visible as you scroll through the page. Everything functions properly until you reach about halfway down the page, at which point the TOC mysteriously vanishes. #TOC, .TOC { posit ...

javascripthtmlcssobsidian

The alignment of the header and table body in the datatable is incorrect

//I have included the scrollY option in dtOptions .withOption('scrollY','auto') <table datatable dt-columns="dtColumns" dt-options="dtOptions" style="width:100%;"></table> Unfortunately, this has caused alignment issues ...

cssangularjsdatatablesscroller