Using CSS :after to shade a button:hover

I'm trying to add a bunch of different color classes to my buttons and allow additional classes to be added arbitrarily. All of these should darken on hover. It seems tedious to write button.(color):hover rules for every single color, so I've written this such that the :after section gets darker and covers the button background.

However, I can't get the :after section to fit between the button's text and its background as desired. At the moment, it also shades the text. The idea here is to remove any tedious part of adding a new button element or a new button color class, so I'd like to avoid additional html or additional css rules for each color. Ideas?

button { border: 0; padding: 1em; position: relative; cursor: pointer; background: none; } button:after { content: " "; transition: background-color .3s ease; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } button:hover:after { background-color: rgba(0, 0, 0, 0.3); } { background-color: #6c842e; color: #ffffff; } { background-color: #ff4444; color: #ffffff; }

<button>Boop</button> <button class="green">Boop</button> <button class="red">Boop</button>

-------------Problems Reply------------

How about using box-shadows ?

button {
border: 0;
padding: 1em;
position: relative;
cursor: pointer;
background: none;
button:hover {
box-shadow: inset 0 0 0 50px rgba(0, 0, 0, 0.2);
} {
background-color: #6c842e;
color: #ffffff;

<button class="green">Boop</button>

Category:css Views:3 Time:2019-02-10
Tags: button css css3

Related post

  • OpenLayers CSS Styling of Standard Control Buttons 2011-08-08

    I'm using OpenLayers on a script on my page, and I'm trying to use CSS to style the standard buttons that come on the map. I followed the OpenLayers docs site in styling them like so: .olControlNavToolbar div { display:block; width: 28px; height: 28p

  • CSS :after pseudo-class and content: declaration 2012-02-22

    I'm trying to add pipes between a set of links using css :after to add content see this fiddle: For some reason, it's adding the pipes inside the <a> tags instead of after them. Basically all i'm looking for is to g

  • CSS button hover issues between Firefox and Chrome using image sprite 2011-06-16

    The rollover uses a single image for both the regular and hover states. The buttons display fine in both Firefox and Chrome, but the rollover does not work in Firefox. Here's the HTML, which uses a list for multiple buttons (just a single instance of

  • how to access div within the element, such as button using css? So, that I can use hover function on div either css or jquery? 2014-01-31

    <table><t head><tr><t h><button><div> Is it possibl to get my div? Because I need to use the hover function on that div. --------------Solutions------------- table > th > button div Or table > th > butt

  • How to change an input button image using CSS? 2008-10-12

    So, I can create an input button with an image using <INPUT type="image" src="/images/Btn.PNG" value=""> But, I can't get the same behavior using CSS. For instance, I've tried <INPUT type="image" class="myButton" value=""> where "myButton

  • Asp Button hover and CSS 2009-10-01

    I have an asp button control on which i have applied some style. I want that on hover of this button, the colour of the button should change or something of that sort. But I fail to understand why in CSS the button hover function is not working!! PLe

  • Styling button background-image, button icon image, and text using CSS sprites 2010-06-25

    I'm trying to elegantly solve a styling issue with some buttons and images. My goal is to have buttons that look like the following: (Hacky mspaint mockup) However, I have a set of criteria I'd like to meet: I also need to be able to have the icon im

  • Aligning buttons with a row in a table using css 2011-02-13

    I'm trying to develop a table that can be used to edit database information (for non-database users). Here's what I have (for html): <table id="myTable" cellspacing='0'> <tr><th>Column 1</th><th>Column 2</th><th

  • Good-looking buttons (using CSS) on Internet Explorer 2011-03-22

    Let's face it, regular Input form buttons are boring and plain. So I tried searching and I thought.. maybe you guys know a better answer. Do you guys know where I could find sexy css form buttons that work on Internet Explorer? Thanks --------------S

  • Using CSS only: change a div's background color on hover 2011-09-19

    I have a div that is a link to another page. When someone hovers over the div(ie, link) I want the whole div's background color to go blue. I would like to do this all in CSS because javascript may not work with everyone. My Problem: My code below at

  • Continous animation after clicking the next button using Easyslider 1.7 2011-09-22

    Does anybody who has ever used this know how to get the slides to continue scrolling after clicking the next button? Currently if you click on 'next' button, they stay on that slide. My jQuery skills are slightly below average and I can't figure out

  • custom down arrow buttons using CSS in Qt 2011-11-08

    We're developing a touch screen Qt application in C++ forms that requires a wide down arrow graphic image as well as a custom background. I've been trying to get something that works using CSS, but have thus far been defeated. The only way I found to

  • How to use CSS to position div popup when using :hover-? 2011-12-04

    I am trying to create a popup in CSS. In this case, it's a small div containing text labeling the image you're hovering. However, I am definitely doing it wrong. I am either positioning the :hover div in CSS incorrectly (I've tried different position

  • CSS button: hover, disabling then re-enabling with javascript 2011-12-08

    I have some buttons which have a hover effect which makes the button color darker on hover ( with css ). When the user clicks on those buttons, i disable them via javascript. when i want the procedure ( game ) to start again and i re-enable the butto

  • Center div consisting of series of button using CSS 2011-12-15

    this may sound simple, I have made a div block which consists of buttons which should be lying horizontally one after another. The buttons are used for navigation and the number of buttons changes dynamically depending on the web pages. Now my proble

  • How to show the text overflow after showing two lines in the div using css? 2011-12-23

    I'm designing a web page. I want to show the text overflow with the help of ellipsis to the div. But I want to show the two lines of data in the div and after that I want to handle the text overflow. I don't want to set the fix height to the div. How

  • Cordova apps hangs when started after exiting with back button when using jquery-mobile-1.1.0-rc1 2012-03-24

    I recently upgraded my apps from jquery-mobile-1.0.1 to jquery-mobile-1.1.0-rc1. Everything was working properly in jquery-mobile-1.0.1 but when using jquery-mobile-1.1.0-rc1 my apps hangs when re-started after exiting with back button. Note: The app

  • Is it possible to do a kind of Link / Button style using CSS with special effects like shadows, outlining of text, and/or gradient? 2008-10-11

    Is it possible to make such buttons () using CSS? It should be Menu, and PHP would just feed the text to html/css and css should take care of the design. Maybe I want too much out of CSS - especially with that red outline of the text.. ? Any ideas ho

  • Place Radio Button Label Above Using CSS 2009-01-21

    I need the ability to place the labels for radio buttons above the selections, and not to the left or the right. Is there a way to use CSS that would give this effect? THanks! --------------Solutions------------- Instead of the following: <label

  • Styling A Link Button Using CSS Across Browsers 2009-03-25

    UPDATE #2: I have solved almost all my issues bar the one major one. With the same structure and CSS IE7/6 displays each a with 100% width of it's container. I need this to no happen. Besides that everything else is fine. Can anyone enlighten me? UPD

  • How to use CSS hover inside html-tag? 2009-12-02

    I want to do something like this: <li style="hover:background-color:#006db9;"> But it wont work. Is this possible to do in some way, or do I have to write the css in the head or external css-document? --------------Solutions------------- This i

  • How do I use vba to make a new button in Powerpoint and how do I make a progress bar after I click on it? 2010-02-17

    I have some code that I execute when a slide show presentation begins but because it takes some time, I want to create a button in a Powerpoint toolbar to execute this code. So, I click on the button and after that I want to happear a progress bar! H

  • how to Design a vista like button using CSS 2010-06-01

    can any one tell me the way to design vista like buttons using CSS for the application in ASP.NET. For the Buttons like Save,delete,Cancel etc --------------Solutions------------- check this :

  • How to stretch the form submit button using CSS? 2010-08-27

    how do I stretch a form submit button using CSS? I'd like to have some kind of horizontal padding between the text inside the button and the button left and right end. Is this possible, and if so, how? Tips for making the button prettier (without usi

  • Animate a button's image when focused, using CSS 2010-09-22

    I know I can make my button's image bigger when it is focused using a css like: button image { width:64px; height:64px; } button:focus, button:focus image { width:128px; height:128px; } But, is there a way to make the image grow gradually (like an an

Copyright (C), All Rights Reserved.

processed in 0.075 (s). 11 q(s)