
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

If you’re a fan, why?
If you’re not fussed on it, how comes?
New

So, if we can reduce the likelihood, we can reduce the overall risk. That’s good. It’s actually very similar to a very common idea called...
New

Great paper by Igor Kopestenski on Erlang and GRiSP: Erlang as an Enabling Technology for Resilient General-Purpose Applications on Edge ...
New

When you are under pressure to deliver you ideally want your Pull Request to be reviewed, approved and merged as quick as possible. So do...
New

Continuing the discussion from Thinking about learning Crystal, let’s discuss - I was wondering which languages don’t GC - maybe we can c...
New

For those that are interested, Snyk (developer security tool) announced support for Elixir earlier this week:
Just thought I’d pass it...
New

Just wondering whether you have a preference (I know I do!)
poll
New

I am thinking about getting a fitness tracker of some kind (probably one from Garmin). Have any of you developed your own widgets, watchf...
New

My brother got a VPS on https://contabo.com hosting provider, but I was not aware of them, and when my brother told me the price and spec...
New

Hi everyone!
I bought this domain name when I was planning to create a website like ElixirSchool.com, but that didn’t ever happen.
Now ...
New
Other popular topics

Which, if any, games do you play? On what platform?
I just bought (and completed) Minecraft Dungeons for my Nintendo Switch. Other than ...
New

I know that these benchmarks might not be the exact picture of real-world scenario, but still I expect a Rust web framework performing a ...
New

I am thinking in building or buy a desktop computer for programing, both professionally and on my free time, and my choice of OS is Linux...
New

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

No chair. I have a standing desk.
This post was split into a dedicated thread from our thread about chairs :slight_smile:
New

We have a thread about the keyboards we have, but what about nice keyboards we come across that we want? If you have seen any that look n...
New

Just done a fresh install of macOS Big Sur and on installing Erlang I am getting:
asdf install erlang 23.1.2
Configure failed.
checking ...
New

Build highly interactive applications without ever leaving Elixir, the way the experts do. Let LiveView take care of performance, scalabi...
New

A few weeks ago I started using Warp a terminal written in rust. Though in it’s current state of development there are a few caveats (tab...
New

If you get Can't find emacs in your PATH when trying to install Doom Emacs on your Mac you… just… need to install Emacs first! :lol:
bre...
New
Categories:
Sub Categories:
- All
- In The News (10156)
- Dev Chat
- Questions (32)
- Resources (118)
- Blogs/Talks (26)
- Jobs (3)
- Events (15)
- Code Editors (58)
- Hardware (57)
- Reviews (5)
- Sales (15)
- Design & UX (4)
- Marketing & SEO (1)
- Industry & Culture (14)
- Ethics & Privacy (19)
- Business (4)
- Learning Methods (4)
- Content Creators (7)
- DevOps & Hosting (9)
Popular Portals
- /elixir
- /rust
- /ruby
- /wasm
- /erlang
- /phoenix
- /keyboards
- /rails
- /js
- /python
- /security
- /go
- /swift
- /vim
- /clojure
- /emacs
- /haskell
- /java
- /onivim
- /svelte
- /typescript
- /crystal
- /kotlin
- /c-plus-plus
- /tailwind
- /gleam
- /ocaml
- /react
- /elm
- /flutter
- /vscode
- /ash
- /opensuse
- /centos
- /php
- /deepseek
- /html
- /zig
- /scala
- /sublime-text
- /lisp
- /textmate
- /debian
- /nixos
- /agda
- /react-native
- /kubuntu
- /arch-linux
- /revery
- /django
- /ubuntu
- /spring
- /manjaro
- /nodejs
- /diversity
- /lua
- /c
- /slackware
- /julia
- /markdown