CSS Portal
UI
Search
Create UI Element
Login
Register
Buttons
13
Cards
11
Checkboxes
10
Forms
10
Inputs
9
Loaders
12
Patterns
9
Radio Buttons
11
Toggle Switches
12
Tooltips
8
Favorites
Social Button by daveTee
1
Add to Favorites
HTML Code
CSS Code
Copy
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" /> <div class="button"> <a href="javascript:void(0)"> <i class="fab fa-github-square"></i> </a> <a href="javascript:void(0)"> <i class="fab fa-codepen"></i> </a> <a href="javascript:void(0)"> <i class="fab fa-youtube"></i> </a> <a href="javascript:void(0)"> <i class="fab fa-facebook-square"></i> </a> <a href="javascript:void(0)"> <i class="fab fa-twitter-square"></i> </a> <a href="javascript:void(0)"> <i class="fab fa-instagram"></i> </a> </div>
Copy
.button { width: 280px; height: 60px; border: 3px solid #8332ab; border-radius: 30px; display: flex; justify-content: space-evenly; align-items: center; position: relative; color: black; cursor: pointer; overflow: hidden; font-size: 24px; transition: all 0.5s ease; } .button:before { content: "FOLLOW US"; font-family: "Poppins", sans-serif; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: white; font-size: 16px; letter-spacing: 1px; width: 100%; height: 100%; border-radius: 30px; display: flex; justify-content: center; align-items: center; background: #8332ab; transition: all 0.5s ease; } .button:hover { background: #fff; } .button:hover:before { top: -50%; } .button a { color: black; text-decoration: none; } .button a:hover { color: #8332ab; }
Uploaded:
18th July 2024
Views:
117
Tags:
#purple
,
#social
,
#follow
,
#media
,
#rounded
,
#button
daveTee
CSS Properties Used
There are 22 CSS properties used in the above example. Click to view and learn about each property.
width
height
border
border-radius
display
justify-content
align-items
position
color
cursor
overflow
font-size
transition
content
font-family
left
top
transform
letter-spacing
background
text-decoration
a
