Buttons with Google material design icons.

Developer
Mayur Elbhar
Size
1,945 Kb
Views
18,216
  1. Buttons with Google material design icons. Previews
  2. Buttons with Google material design icons. HTML Codes
  3. Buttons with Google material design icons. CSS Codes

How do I make an buttons with google material design icons.?

What is a buttons with google material design icons.? How do you make a buttons with google material design icons.? This script and codes were developed by Mayur Elbhar on 31 October 2022, Monday.

Buttons with Google material design icons. Previews
IQ Test

Buttons with Google material design icons. - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Buttons with Google material design icons.</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="frame"> <a href="#" ><button class="btn" ><img src="https://i.imgur.com/Rccs7hU.png" alt="" height=20px; width=20px;/></button></a> <a href="#" ><button class="btn" ><img src="https://i.imgur.com/f1c9qPP.png" alt="" height=20px; width=20px;/></button></a> <a href="#" ><button class="btn" ><img src="https://i.imgur.com/seKjjiv.png" alt="" height=20px; width=24px;/></button></a> <a href="#" ><button class="btn" ><img src="https://i.imgur.com/isTbyOj.png" alt="" height=20px; width=24px;/></button></a> <a href="#" ><button class="btn" ><img src="https://i.imgur.com/Y7loaq8.png" alt="" height=24px; width=24px;/></button></a> <a href="#" ><button class="btn" ><img src="https://i.imgur.com/wRxt5Wl.png" alt="" height=25px; width=20px;/></button></a> <a href="#" ><button class="btn" ><img src="https://i.imgur.com/UI8keOY.png" alt="" height=20px; width=20px;/></button></a> <a href="#" ><button class="btn" ><img src="https://i.imgur.com/Ecr8sQs.png" alt="" height=20px; width=20px;/></button></a> <a href="#" ><button class="btn" ><img src="https://i.imgur.com/TB4NkxK.png" alt="" height=28px; width=20px;/></button></a> <a href="#" ><button class="btn" ><img src="https://i.imgur.com/TZhxiz8.png" alt="" height=24px; width=16px;/></button></a> <a href="#" ><button class="btn" ><img src="https://i.imgur.com/TKSpTkg.png" alt="" height=24px; width=20px;/></button></a> <a href="#" ><button class="btn" ><img src="https://i.imgur.com/EibjoNS.png" alt="" height=24px; width=20px;/></button></a> <a href="#" ><button class="btn" ><img src="https://i.imgur.com/D022Wtd.png" alt="" height=24px; width=24px;/></button></a> <a href="#" ><button class="btn" ><img src="https://i.imgur.com/VhMoL1P.png" alt="" height=24px; width=24px;/></button></a>
</div>
<div class="frame"> <a href="#" ><button class="btn" ><img src="https://i.imgur.com/Rccs7hU.png" alt="" height=20px; width=20px;/></button></a> <a href="#" ><button class="btn" ><img src="https://i.imgur.com/f1c9qPP.png" alt="" height=20px; width=20px;/></button></a> <a href="#" ><button class="btn" ><img src="https://i.imgur.com/seKjjiv.png" alt="" height=20px; width=24px;/></button></a> <a href="#" ><button class="btn" ><img src="https://i.imgur.com/isTbyOj.png" alt="" height=20px; width=24px;/></button></a> <a href="#" ><button class="btn" ><img src="https://i.imgur.com/Y7loaq8.png" alt="" height=24px; width=24px;/></button></a> <a href="#" ><button class="btn" ><img src="https://i.imgur.com/wRxt5Wl.png" alt="" height=25px; width=20px;/></button></a> <a href="#" ><button class="btn" ><img src="https://i.imgur.com/UI8keOY.png" alt="" height=20px; width=20px;/></button></a> <a href="#" ><button class="btn" ><img src="https://i.imgur.com/Ecr8sQs.png" alt="" height=20px; width=20px;/></button></a> <a href="#" ><button class="btn" ><img src="https://i.imgur.com/TB4NkxK.png" alt="" height=28px; width=20px;/></button></a> <a href="#" ><button class="btn" ><img src="https://i.imgur.com/TZhxiz8.png" alt="" height=24px; width=16px;/></button></a> <a href="#" ><button class="btn" ><img src="https://i.imgur.com/TKSpTkg.png" alt="" height=24px; width=20px;/></button></a> <a href="#" ><button class="btn" ><img src="https://i.imgur.com/EibjoNS.png" alt="" height=24px; width=20px;/></button></a> <a href="#" ><button class="btn" ><img src="https://i.imgur.com/D022Wtd.png" alt="" height=24px; width=24px;/></button></a> <a href="#" ><button class="btn" ><img src="https://i.imgur.com/VhMoL1P.png" alt="" height=24px; width=24px;/></button></a>
</div>
</body>
</html>

Buttons with Google material design icons. - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Merriweather);
body { background: #5cbf65; font: 15px 'Merriweather', serif; color: white;
}
.frame { margin: auto; width: 500px;
}
.btn { background: white; border: none; text-decoration: none; width: 48px; height: 48px; padding: 0px; margin: 10px; position: relative; vertical-align: middle; text-align: center; display: inline-block; border-radius: 5px; transition: box-shadow 0.4s; color: #000; cursor: pointer;
}
.btn:hover { box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.6);
}
.btn:active { box-shadow: inset 0px 0px 5px rgba(0,0,0,0.6);
}
Buttons with Google material design icons. - Script Codes
Buttons with Google material design icons. - Script Codes
Home Page Home
Developer Mayur Elbhar
Username mayurelbhar
Uploaded October 31, 2022
Rating 3
Size 1,945 Kb
Views 18,216
Do you need developer help for Buttons with Google material design icons.?

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!

Mayur Elbhar (mayurelbhar) Script Codes
Name
SAMSUNG PHONE MOCKUP
Contact US Form
FLAT UI BUTTONS
Simple Text Shadow with CSS
Typography Experiment
Website Layout
Typography Experiment 2 - Blurry Text
Hamburger menu prototypes
Website Layout 1
A simple log in form made with css
Create amazing video scripts 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!