harwind
CSS Transitions: How to Create Smooth Hover Effects
I’m working on a web project and I want to add smooth hover effects to elements on my webpage using CSS transitions. Specifically, I’d like to change the background color and text color of a button when a user hovers over it.
Here’s what I have so far in my CSS code:
.button {
background-color: #3498db;
color: #fff;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 4px;
}
.button:hover {
background-color: #2980b9;
color: #fff;
}
While this works, the transition between the original and hover states is abrupt. How can I create a smoother transition effect, so the color change appears gradual and fluid?
I’d appreciate it if you could provide guidance on how to use CSS transitions to achieve this smooth hover effect, including any necessary CSS properties and values. Thank you for your help!
Popular General Dev topics
I’m thinking of buying a monitor that I can rotate to use as a vertical monitor?
Also, I want to know if someone is using it for program...
New
Thought it might be worth having a dedicated thread for standing desk treadmills (for those interested, here’s our general thread on stan...
New
Great paper by Igor Kopestenski on Erlang and GRiSP: Erlang as an Enabling Technology for Resilient General-Purpose Applications on Edge ...
New
Do the test and post your score :nerd_face:
:keyboard:
If possible, please add info such as the keyboard you’re using, the layout (Qw...
New
What shell(s) do you use, why do you use them, and how do you have them configured?
Note, this is about shell’s, not terminals, terminal...
New
Hi all, does anybody tried Shankar Devy’s Phoenix Inside Out book series?
Also, will there be a big difference (aside from context prior...
New
With 100% less blockchain.
I went searching for a lightweight immutable database that could be audited and ran into this.
I guess this ...
New
I’ve been watching Prag Dave’s Elixir course and I noticed he uses tree:
Tree is a recursive directory listing program that produces a ...
New
Hey,
I love Regex, letting my kids slaming the keyboard until finding the good regex to do the job has always been a source of joy and p...
New
I am planning to refresh my Ruby knowledge in a month or two, after using other technologies more frequently for a few years. Luckily I w...
New
Other popular topics
Brace yourself for a fun challenge: build a photorealistic 3D renderer from scratch! In just a couple of weeks, build a ray tracer that r...
New
My first contact with Erlang was about 2 years ago when I used RabbitMQ, which is written in Erlang, for my job. This made me curious and...
New
I have seen the keycaps I want - they are due for a group-buy this week but won’t be delivered until October next year!!! :rofl:
The Ser...
New
Small essay with thoughts on macOS vs. Linux:
I know @Exadra37 is just waiting around the corner to scream at me “I TOLD YOU SO!!!” but I...
New
In case anyone else is wondering why Ruby 3 doesn’t show when you do asdf list-all ruby :man_facepalming: do this first:
asdf plugin-upd...
New
Learn different ways of writing concurrent code in Elixir and increase your application's performance, without sacrificing scalability or...
New
Intensively researching Erlang books and additional resources on it, I have found that the topic of using Regular Expressions is either c...
New
Will Swifties’ war on AI fakes spark a deepfake porn reckoning?
New
Develop, deploy, and debug BEAM applications using BEAMOps: a new paradigm that focuses on scalability, fault tolerance, and owning each ...
New
Ask Me Anything with
Mark Volkmann
@mvolkmann
On February 24 and 25, we are giving you a chance to ask questions of PragProg author M...
New
Categories:
Sub Categories:
- All
- In The News (10553)
- Dev Chat
- Questions (34)
- Resources (119)
- Blogs/Talks (27)
- Jobs (3)
- Events (15)
- Code Editors (59)
- Hardware (57)
- Reviews (5)
- Sales (16)
- Design & UX (5)
- Marketing & SEO (2)
- Industry & Culture (14)
- Ethics & Privacy (19)
- Business (4)
- Learning Methods (5)
- Content Creators (7)
- DevOps & Hosting (9)
Popular Portals
- /elixir
- /rust
- /ruby
- /wasm
- /erlang
- /phoenix
- /keyboards
- /python
- /js
- /rails
- /security
- /go
- /swift
- /vim
- /clojure
- /java
- /emacs
- /haskell
- /svelte
- /onivim
- /typescript
- /kotlin
- /c-plus-plus
- /crystal
- /tailwind
- /react
- /gleam
- /ocaml
- /flutter
- /elm
- /vscode
- /ash
- /html
- /opensuse
- /zig
- /centos
- /deepseek
- /php
- /scala
- /react-native
- /lisp
- /textmate
- /sublime-text
- /nixos
- /debian
- /agda
- /django
- /kubuntu
- /arch-linux
- /deno
- /nodejs
- /revery
- /ubuntu
- /spring
- /manjaro
- /lua
- /diversity
- /markdown
- /julia
- /c








