Lead Gen Button

Developer
Srijon Sarker
Size
2,147 Kb
Views
4,048
  1. Lead Gen Button Previews
  2. Lead Gen Button HTML Codes
  3. Lead Gen Button CSS Codes

How do I make an lead gen button?

What is a lead gen button? How do you make a lead gen button? This script and codes were developed by Srijon Sarker on 29 November 2022, Tuesday.

Lead Gen Button Previews
IQ Test

Lead Gen Button - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Lead Gen Button</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Raleway:300,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="offerBtn"> <img src="http://www.joshwdesign.com/contracticon.svg" alt="icon"> <span class="text1">Get Your<br/>Full Report</span> <span class="text2">for just</span> <span class="text3">$20</span> <span class="text4">Special Offer</span>
</div>
</body>
</html>

Lead Gen Button - Script Codes CSS Codes

.offerBtn { background-color: rgb(56, 154, 220); box-shadow: 6.428px 7.66px 5px 0px rgba(0, 0, 0, 0.1),inset 0px 5px 0px 0px rgba(255, 255, 255, 0.15);
width: 420px; height: 100px; z-index: 82; display:block; position:relative; overflow:hidden; font-family:'Raleway', sans; cursor:pointer; transition: all .2s;
}
.offerBtn:hover { background:#3CBD45;
}
.offerBtn img { height:80px; top:10px; position:absolute; left:-5px; opacity:.2;
}
.offerBtn span { position: absolute;
}
.btnIcon {top:24px;left:50px;}
.st0{fill:#FFFFFF;}
.st1{fill:#FFFFFF;fill-opacity:0.5;}
.text1, .text2, .text3 { color:#FFF; font-weight:800;
}
.offerBtn:before { content:''; display:block; height:500px; width:500px; position:absolute; background-color:rgba(255,255,255,.15); transform: rotate(-45deg); top:-200px; left:-330px; transition:all .2s;
}
.offerBtn:hover:before { left:-300px;
}
.text1{ font-size:36px; line-height:1em; left:20px; top:13px;
}
.text2 { font-weight:300; right:50px; top:10px;
}
.text3 { top:10px; right:40px; font-size:60px; font-family:'Open Sans', sans; font-weight:400; letter-spacing:-4px;
}
.text4 { transform: rotate(-90deg); right:-39px; top:37px; background:yellow; padding:7px 10px; font-size: 11px; text-transform: uppercase; box-shadow:inset 0 2px 2px rgba(0,0,0,0.4);
}
Lead Gen Button - Script Codes
Lead Gen Button - Script Codes
Home Page Home
Developer Srijon Sarker
Username Creative_Srijon
Uploaded November 29, 2022
Rating 3
Size 2,147 Kb
Views 4,048
Do you need developer help for Lead Gen 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!

Srijon Sarker (Creative_Srijon) Script Codes
Name
Image Hover ii
Material Calendar Concept
Catagory Choosing
Material Design Image Card
My Profile Card
Material Design Author Quote
Material Login Form
Visual Card
Springy popup card
Statics UI
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!