CSS Portal
UI
Search
Create UI Element
Login
Register
Buttons
13
Cards
11
Checkboxes
10
Forms
10
Inputs
9
Loaders
11
Patterns
9
Radio Buttons
11
Toggle Switches
11
Tooltips
8
Favorites
Animated Hover Button by daveTee
0
Add to Favorites
HTML Code
CSS Code
Copy
<button class="button" > <span>Hover me</span> </button>
Copy
.button { min-width: 200px; padding: 0 30px; height: 50px; font-size: 16px; color: #2c3e50; letter-spacing: 3px; box-shadow: 0 5px 15px -10px rgba(0, 0, 0, 0.2); position: relative; cursor: pointer; border: none; display: flex; justify-content: center; align-items: center; font-weight: 700; border-radius: 8px; text-transform: uppercase; transition: all 0.5s ease; } .button span { z-index: 1; text-align: center; } .button::before, .button::after { content: ''; position: absolute; width: 4px; height: 100%; top: 0; transition: all 0.5s ease; background: #2c3e50; } .button::before { left: 0; border-top-left-radius: 5px; border-end-start-radius: 5px; } .button::after { right: 0; border-top-right-radius: 5px; border-end-end-radius: 5px; } .button:hover { transition: all 0.5s ease; color: #f1c40f; } .button:hover::after, .button:hover::before { width: 50%; }
Uploaded:
18th July 2024
Views:
35
Tags:
#slide
,
#hover
,
#animated
,
#modern
,
#button
daveTee
CSS Properties Used
There are 29 CSS properties used in the above example. Click to view and learn about each property.
min-width
padding
height
font-size
color
letter-spacing
box-shadow
position
cursor
border
display
justify-content
align-items
font-weight
border-radius
text-transform
transition
z-index
text-align
content
width
top
background
left
border-top-left-radius
border-end-start-radius
right
border-top-right-radius
border-end-end-radius
