CSS Search Button

Developer
Douglas Glover
Size
1,756 Kb
Views
12,144
  1. CSS Search Button Previews
  2. CSS Search Button HTML Codes
  3. CSS Search Button CSS Codes

How do I make an css search button?

Recreated the search button on www.blacks.ca using pure CSS3. Vector based and resizable!. What is a css search button? How do you make a css search button? This script and codes were developed by Douglas Glover on 17 October 2022, Monday.

CSS Search Button Previews
IQ Test

CSS Search Button - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Search Button</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="circle search-background"> <div class="circle magnifying-glass-rim"> <div class="circle magnifying-glass-glass"> </div> </div> <div class="magnifying-glass-handle"></div>
</div>
</body>
</html>

CSS Search Button - Script Codes CSS Codes

.circle{ height: 0; width: 0; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; position: relative;
}
/* Change the width and height (equally) to change the size! */
.search-background{ cursor: pointer; background: #df1a00; width: 36px; height: 36px;
}
.magnifying-glass-rim{ background: #fff; width: 50%; height: 50%; top: 20%; left: 22%;
}
.magnifying-glass-glass{ background: #df1a00; width: 70%; height: 70%; top: 15%; left: 15%;
}
.magnifying-glass-handle{ background: #fff; height: 10%; width: 20%; left:60%; top:10%; border-top-right-radius: 2px; border-bottom-right-radius: 2px; position: relative; transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg)
}
CSS Search Button - Script Codes
CSS Search Button - Script Codes
Home Page Home
Developer Douglas Glover
Username DouglasGlover
Uploaded October 17, 2022
Rating 3
Size 1,756 Kb
Views 12,144
Do you need developer help for CSS Search Button?

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!

Douglas Glover (DouglasGlover) Script Codes
Name
Dragonball Dragon Radar
CSS Hover Image Effect - Transition
Soul Sacrifice Enemy Weaknesses
Pulsating Orb
Random Animation
Triangle Banner
VROptimal 360 Video Demo
Relative Position SVG Clip-path
Loading Dots CSS3 Animation
Photo Grid with Hover
Create amazing blog posts with AI!

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!