Css button press style

CSS Buttons

Use the background-color property to change the background color of a button:

Example

Button Sizes

Use the font-size property to change the font size of a button:

Example

Use the padding property to change the padding of a button:

10px 24px 12px 28px 14px 40px 32px 16px 16px

Example

.button1
.button2
.button3
.button4
.button5

Rounded Buttons

Use the border-radius property to add rounded corners to a button:

Example

Colored Button Borders

Use the border property to add a colored border to a button:

Example

Hoverable Buttons

Use the :hover selector to change the style of a button when you move the mouse over it.

Tip: Use the transition-duration property to determine the speed of the «hover» effect:

Example

.button <
transition-duration: 0.4s;
>

.button:hover background-color: #4CAF50; /* Green */
color: white;
>
.

Shadow Buttons

Use the box-shadow property to add shadows to a button:

Example

.button1 <
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
>

.button2:hover box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
>

Disabled Buttons

Use the opacity property to add transparency to a button (creates a «disabled» look).

Tip: You can also add the cursor property with a value of «not-allowed», which will display a «no parking sign» when you mouse over the button:

Example

Button Width

By default, the size of the button is determined by its text content (as wide as its content). Use the width property to change the width of a button:

Example

Button Groups

Remove margins and add float:left to each button to create a button group:

Example

Bordered Button Group

Use the border property to create a bordered button group:

Example

Vertical Button Group

Use display:block instead of float:left to group the buttons below each other, instead of side by side:

Example

Button on Image

Button

Animated Buttons

Example

Example

Add a «pressed» effect on click:

Example

Example

Add a «ripple» effect on click:

Источник

How to make a button looked like it’s staying pressed down

Let’s say you have a button on your page and when the user clicks it, it should look like it’s staying pressed until they do something else. How do you do that? It’s pretty easy, you just need a box shadow and a bit of JavaScript.

Button set up

Nothing exciting here, it’s just a button with a class of button. You don’t need the class in this example, but let’s assume it’s on a page that includes other buttons that do other things, so we’d need a class to differentiate it. And the CSS for the button:

.button  position: relative; padding: 0.5em 1em; border: 0; border-radius: 0.5em; background-color: pink; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); cursor: pointer; > 

The position: relative is needed later. The padding, border and border radius are just there to make it look pretty. The background colour is too, but it also makes it stand out from the page. The box-shadow is only a very small one, but it’s enough to make the button look like it’s not flat on the page.

Making the button looked pressed

Now to make the button look pressed we remove the box-shadow and move it by the amount of space the box-shadow was taking up:

.button:active  top: 2px; left: 1px; box-shadow: none; > 

The position relative on the button was so that the top and left work here. Without it the CSS doesn’t know what that top and left is in relation to and it doesn’t do what you’d expect. Now, when you click the button it goes down and right a bit, which makes it look like it’s gone from sticking up from the page a bit, to being flat against the page. Which is roughly how a button works in the real world. But of course, the active pseudo class only kicks in while you’re clicking the button. Once you take your finger off the mouse, it’s not active any more and it pops back up. To make it look like it’s stayed pressed, we need JavaScript.

Making the button look staying pressed

For this we need an event listener. It’s going to listen for the button click and when it hears it, it’ll do something.

const button = document.querySelector('.button'); button.addEventListener('click', () =>  console.log('Button clicked'); >); 

You can select the button lots of ways, but I like querySelector because when I’m in CodePen and have to therefore type the whole thing myself, I don’t have to remember where the capital letters are. It also works for everything, I don’t have to select button, .button and #button in different ways. I used an arrow class in here because I’ve got into the habit of only using them. You can use a normal function:

const button = document.querySelector('.button'); button.addEventListener('click', function()  console.log('Button clicked'); >); 

You can also put that console log in another function, rather than using an anonymous function. Again, I’m used to using anonymous functions unless I have more than one listener wanting to do the same thing. Here it is calling a function:

const button = document.querySelector('.button'); function clicked()  button.classList.toggle('active'); > button.addEventListener('click',clicked); 

So now the question is, how do we make it appear to stay pressed down? Well, we can add CSS into JavaScript eg:

button.style.boxShadow = 'none'; 

But in this case we want to add three styles and we already have them defined in our CSS for the active pseudo class. So let’s re-use that:

const button = document.querySelector('.button'); button.addEventListener('click', () =>  button.classList.add('active'); >); 

.button:active, .active  top: 2px; left: 1px; box-shadow: none; > 

1. I’ve added some CSS to the html and body to centre the button on the page, so it’s easier to see
2. Rather than adding the active class, I’m toggling it. classList.toggle means that if the class is applied, then remove it, but if it’s not on there, add it. It means that you can test clicking the button multiple times without having to refresh the page.

Источник

Pressed Button State With CSS

NOTE: I’ve covered button link styling using CSS3 in a more recent post which you can read here. The following post is an older method using images.

There is certain anchor state in CSS that I don’t see used very often – actually, it’s something I haven’t really used myself, but something which I now realize can be very useful. I’m talking about the “active” anchor state.

The active anchor state is the state an anchor (a link) is in when you click on it. The moment you click on a link, it becomes active. We all use the “hover” or “visited” states, but the active state can come in very handy when you’ve got custom styled buttons.

You see, on the desktop, whether on Windows, Linux or OS X, the buttons respond to you when you click on them. They visibly become pressed down, telling you that you’ve pushed them. This provides satisfying feedback to the user and makes the application feel more responsive.

On the web, such feedback is seldom given. You click on a button and nothing happens. In some browsers you’ll see a selection outline around the link or button while the next page is loading. Even buttons that have custom background images making them look like big solid buttons don’t do anything when you push them. They remain static and unresponsive.

It doesn’t have to be this way. Just use the “active” state to give your buttons a “pressed” look or whatever other look you wish. This will make your application or website stand out above the rest, as the experience will be closer to what the user is familiar to on the desktop rather than on the web.

Ok, enough chit chat, here’s what you do:

Say you have a button in your application that uses a custom image. The markup would look something like this:

It’s an empty anchor with an id. We can use this id to style the anchor. Our CSS would then look like this:

We’re simply turning the inline anchor into a block, giving it a width and a height, and setting a background image. The button will look like this:

To add the active state simply append “:active” after the anchor selector:

Because my image contains both anchor states, we simply shift the background position to the bottom, which changes the look of the button to this:

Here’s the image I’m talking about, and here’s a live demo.

Let me know what you think. I would definitely like to see more active states used on the web. With just a couple of lines of CSS you can make your site or app feel more responsive.

[Update 16 Dec 2008] William has posted a useful link in the comments to enable the “:active” class in IE. Here’s the fix.

Copyright © 2022 Dmitry Fadeyev · About · Contact

Источник

How to make a button click effect in CSS

Here you’ll learn how to make the button press-in effect in CSS. We’ll tell you ahead of time that there’s nothing complicated here, any beginner will be able to cope with it.

Example

What we end up with (click the button):

What do we need to know? You must know what a pseudo-element is (:before and :after) and what pseudo-classes are (:hover, :active). You should understand how to add a shadow to an element and how you can move the element with the transform property.

Writing the code

Let’s create our button in HTML:

Now, let’s move on to configuring the CSS. First, let’s rewrite the properties of button, which are set by default:

Now you can move on to the visual appearance of the button. Let’s set the text color, background, border, padding, and other little things.

So, we should get our button like this:

So far, nothing special. But let’s move on to pseudo-elements. Let’s add :before

And now we have a button with a 3D effect. We set the pseudo-element with background and shadow, which allowed us to achieve this effect. We also lowered it just below the main frame of the button. This is what we got:

Now let’s make a press-in effect when hovering over the button. It will be pressed in slightly, not entirely.

To do this, we lower the main frame below by changing its background a bit and slightly reducing the shadow (box-shadow) for the pseudo-element:

button.btn:hover < background: #ffe9e9; transform: translate(0, 0.25em); >button.btn:hover::before

A button like this comes out (hover over it!):

And the final touch, let’s change the styles in condition :active

button.btn:active < background: #ffe9e9; transform: translate(0em, 0.75em); >button.btn:active::before

When the button is active (the user has clicked it), we move the main part of the button slightly and remove the shadow.

That’s it, the button press-in effect is ready!

Final code

Video

Источник