Buttons with icons made easy - with font awesome

Developer
Mario Loncarek
Size
2,097 Kb
Views
64,768
  1. Buttons with icons made easy - with font awesome Previews
  2. Buttons with icons made easy - with font awesome HTML Codes
  3. Buttons with icons made easy - with font awesome CSS Codes

How do I make an buttons with icons made easy - with font awesome?

Very easy way to make buttons with font awesome 4.03 icons, flat and metro version, can be use as social buttons or anything else, ux , ui, with hover fx. What is a buttons with icons made easy - with font awesome? How do you make a buttons with icons made easy - with font awesome? This script and codes were developed by Mario Loncarek on 03 July 2022, Sunday.

Buttons with icons made easy - with font awesome Previews
IQ Test

Buttons with icons made easy - with font awesome - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Buttons with icons made easy - with font awesome</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<a href="#">	<span class="iconbtn">	<span class="icon"><i class="fa fa-download"></i></span>	<span class="text">DOWNLOAD</span>	</span>	</a>	<a href="#">	<span class="iconbtn round">	<span class="icon"><i class="fa fa-download"></i></span>	<span class="text">DOWNLOAD</span>	</span>	</a>
</body>
</html>

Buttons with icons made easy - with font awesome - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
body {	margin:20px;	padding:0;	background-color:#2c3e50;	font-family: 'Open Sans', sans-serif;	color:#333;	-webkit-font-smoothing:antialiased;	-webkit-text-size-adjust: none;
}
/* Buttons starts here */
.iconbtn { position: relative; overflow: visible; display: inline-block; border: 0; box-shadow: none; text-shadow: none; font-size: 13px; line-height: 1; transition-property: all .1s ease-in 0s; -moz-transition: all .1s ease-in 0s; -webkit-transition: all .1s ease-in 0s; -o-transition: all .1s ease-in 0s; -webkit-font-smoothing: antialiased; text-transform: uppercase; font-weight: bold; margin: 5px 0; background: #34B484; color: #fff;
}
.iconbtn .text { display: inline-block; vertical-align: middle; padding: 0 20px 0 20px;
}
.iconbtn .icon { line-height: 32px; font-size: 20px; display: inline-block; vertical-align: middle; padding: 10px 20px 10px 20px; background: #39c892; color: #fff;
}
.iconbtn.round { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
}
.iconbtn.round .icon { -webkit-border-top-left-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-bottomleft: 3px; border-top-left-radius: 3px; border-bottom-left-radius: 3px;
}
.iconbtn:hover { background: #39c892;
}
Buttons with icons made easy - with font awesome - Script Codes
Buttons with icons made easy - with font awesome - Script Codes
Home Page Home
Developer Mario Loncarek
Username riogrande
Uploaded July 03, 2022
Rating 3.5
Size 2,097 Kb
Views 64,768
Do you need developer help for Buttons with icons made easy - with font awesome?

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!

Mario Loncarek (riogrande) Script Codes
Name
Responsive overlay menu - grid example
Responsive overlay menu framework
Css3 only dropdown menu
Css3 only dropdown menu
Css only hover animation image effect
Change div order for responsive elements with jquery
Responsive navigation mobile menu toggle
Sticky nav - demo from designmodo
Responsive overlay menu navigation
Responsive overlay menu - full menu example
Create amazing sales emails 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!