CSS Circular Image Buttons
How do I make an css circular image buttons?
Simple CSS example of circular image buttons created using CSS border radius.. What is a css circular image buttons? How do you make a css circular image buttons? This script and codes were developed by Phil Sinatra on 01 February 2023, Wednesday.
CSS Circular Image Buttons - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Circular Image Buttons</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div> <a href="#" class="btn-about circular">About</a> <a href="#" class="btn-contact circular">Contact</a>
</div>
</body>
</html>
CSS Circular Image Buttons - Script Codes CSS Codes
div { margin: 20px auto; max-width: 700px; width: 100%;
}
.circular { /* display items as block elements, inline positioning */ display: inline-block; /* set the height of the image */ height: 300px; /* hide the link text */ text-indent: -9999px; /* set the width of the image */ width: 300px; /* use a radius to make the image into a circular shape */ border-radius: 150px; -webkit-border-radius: 150px; -moz-border-radius: 150px; /* Add shadow to the box */ box-shadow: 0 0 8px rgba(0, 0, 0, .8); -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8); -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}
/* simple hover effect */
a.circular { opacity: .6; /* add fade transition effect to opacity change */ transition: opacity 0.3s ease-in-out; -webkit-transition: opacity 0.3s ease-in-out; /* Safari */
}
a.circular:hover { opacity: 1; }
.btn-about { background: url(http://placekitten.com/g/300/300) no-repeat;
}
.btn-contact { background: url(http://placekitten.com/g/300/300) no-repeat;
}
Developer | Phil Sinatra |
Username | philsinatra |
Uploaded | February 01, 2023 |
Rating | 3 |
Size | 1,853 Kb |
Views | 4,048 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Transform Nav Buttons | 0 Kb |
Fixed Navbar With Logo | 0 Kb |
Animate Slide onLoad With Delay | 0 Kb |
Section Toggle | 0 Kb |
Flexing Nav Bar | 0 Kb |
Local Storage | 0 Kb |
Animated Page Scroll | 0 Kb |
Toggle Menu for Mobile | 0 Kb |
CSS Media Queries | 0 Kb |
YouTube Source Swap | 0 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
RollOver Effect 2 | Lmack90 | 2,162 Kb |
Login with flip 3d animation | Mariusbalaj | 3,014 Kb |
Project Euler Problem 17 | Bfillmer | 2,739 Kb |
Midterm dry run | Jds317 | 1,649 Kb |
Monochrome Form | AlienPiglet | 3,096 Kb |
Ipad Mini Showcase | Hornebom | 10,479 Kb |
CSS Variables | Jdsteinbach | 4,759 Kb |
A Pen by Huan Nghiem | Nightshade | 10,646 Kb |
Formations | Cantelope | 5,731 Kb |
Prototype Responsive Homepage | Heyitsolivia | 7,677 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!