Whenever I create a new project and I want to keep it lightweight without adding any component libraries and so on, I just fiddle together some styles for a button but I rarely take the time to make it look really nice and responsive.
So I spent 15 minutes in creating a button style which looks nice in my opinion. If you like it too, feel free to use it in your project! This is how it looks like:
<style>
button {
background-color: rgb(37, 99, 235);
font-weight: bold;
color: white;
padding: 10px 16px;
font-size: 1rem;
border-radius: .5rem;
transition: all .15s cubic-bezier(0.4,0,0.2,1);
border: none;
cursor: pointer;
}
button:hover {
background-color: rgb(29,78,216);
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
button:active {
position: relative;
top: 1px;
right: 1px;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
</style>
<div style="margin: 6rem;">
<button>Click me</button>
</div>
First some general rules, deep blue background, white bold font, padding, rounded corners, no border and pointer cursor.
Next a hover effect which makes the background color a little darker and adds a box shadow which makes it look like the button elevates up a little bit.
Lastly an active state that does two things in order to make it look like you actually press that button down:
- It changes the position slightly towards the bottom left
- It reduces the box shadow we set earlier in the hover effect
That way it looks like it is less elevated i.e. pressed down.
Top comments (0)