Hot Bottons

Developer
Junaid Khalid
Size
3,770 Kb
Views
16,192
  1. Hot Bottons Previews
  2. Hot Bottons HTML Codes
  3. Hot Bottons CSS Codes
  4. Hot Bottons JS Codes

How do I make an hot bottons?

What is a hot bottons? How do you make a hot bottons? This script and codes were developed by Junaid Khalid on 30 November 2022, Wednesday.

Hot Bottons Previews
IQ Test

Hot Bottons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hot Bottons</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">	<link href='https://fonts.googleapis.com/css?family=Amatic+SC:700' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<section id="wrapper">	<nav class="nav">	<ul class="clearfix">	<li class="active">DEMO 1<span>Fast and Furious</span> </li> <li>DEMO 2<span>From the sides</span> </li> <li>DEMO 3<span>Nice and slow</span> </li> <li>DEMO 4<span>Demo 1 inverted</span> </li> </ul> </nav> <!--DEMO--> <section class="widget demo1 clearfix showdemo"> <div class="btns">	<span class="fa fa-coffee"></span> <h3>Coffee</h3> <p>Brazil is the world's biggest producer of coffee</p> </div> <div class="btns">	<span class="fa fa-gamepad"></span> <h3>Video Games</h3> <p>49% of U.S. households own a dedicated game console</p> </div> <div class="btns">	<span class="fa fa-headphones"></span> <h3>Headphones</h3> <p>Headphones were purposely designed to self-tangle.</p> </div> <div class="btns">	<span class="fa fa-globe"></span> <h3>Planet Earth</h3> <p>The Earth, seen from the moon, also goes through phases.</p> </div> </section> <!--DEMO--> </section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Hot Bottons - Script Codes CSS Codes

* { margin: 0; padding: 0;
}
/*CLEARFIX*/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;
}
.clearfix { display: inline-block; width: 100%;
}
html[xmlns] .clearfix { display: block;
}
* html .clearfix { height: 1%;
}
/*GLOBALS*/
a { text-decoration: none; color: #eaeaea;
}
body,
hmtl { background: #eaeaea;
}
.r { float: right;
}
.l { float: left;
}
/*PLAYER*/
#wrapper { width: 750px; margin: 100px auto; position: relative;
}
/*NAVIGATION*/
.nav ul { width: 100%; list-style: none; font-family: 'Open Sans Condensed', sans-serif; background: #333; color: #fff;
}
.nav ul li { width: 25%; float: left; padding: 10px 0; text-align: center; cursor: pointer;
}
.nav ul li span { display: block; font-size: 14px; color: #999;
}
.nav ul li:hover { background: #444;
}
.nav ul li.active { background: #ffbe12; color: #333; font-weight: 700;
}
.nav ul li.active span { color: #333; font-weight: normal;
}
.widget { width: 100%; margin-top: 20px; padding: 15px; background: #fff; box-shadow: #dfdfdf 0px 4px 0px; border-radius: 3px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; opacity: 0; -moz-transform: translateY(50px); -webkit-transform: translateY(50px); -o-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.widget.showdemo { opacity: 1; -moz-transform: translateY(0px); -webkit-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px);
}
/*BUTTONS*/
.btns { padding: 15px; float: left; width: 25%; min-height: 30px; border-left: 1px solid #eaeaea; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: center; color: #333; height: 100%; overflow: hidden;
}
.btns:first-child { border-left: none;
}
.btns span.fa { font-size: 60px; display: block; margin: 0 auto; width: 100%;
}
.btns h3 { font-family: 'Amatic SC', cursive; font-size: 30px; margin: 20px 0 8px; color: #337ec8;
}
.btns p { font-family: 'Open Sans Condensed', sans-serif; font-size: 18px; line-height: 1.3;
}
/*ANIMATION*/
.btns:hover { background: #333; color: #fff; cursor: pointer; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -ms-transition: background 0.3s ease; -o-transition: background 0.3s ease; transition: background 0.3s ease;
}
.btns:hover h3 { color: #ffbe12;
}
/*DEMO 1*/
.demo1 .btns:hover span,
.demo1 .btns:hover h3,
.demo1 .btns:hover p { -moz-transform: translateY(-250px); -webkit-transform: translateY(-250px); -o-transform: translateY(-250px); -ms-transform: translateY(-250px); transform: translateY(-250px);
}
.demo1 .btns.active span,
.demo1 .btns.active h3,
.demo1 .btns.active p { -moz-transform: translateY(0px); -webkit-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.demo1 .btns.active span { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -ms-transition-delay: 0.2s;
}
.demo1 .btns.active h3 { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; -moz-transition-delay: 0.1s; -o-transition-delay: 0.1s; -ms-transition-delay: 0.1s;
}
/*DEMO 2*/
.demo2 .btns:hover span,
.demo2 .btns:hover p { -moz-transform: translateX(-200px); -webkit-transform: translateX(-200px); -o-transform: translateX(-200px); -ms-transform: translateX(-200px); transform: translateX(-200px);
}
.demo2 .btns:hover h3 { -moz-transform: translateX(200px); -webkit-transform: translateX(200px); -o-transform: translateX(200px); -ms-transform: translateX(200px); transform: translateX(200px);
}
.demo2 .btns.active span,
.demo2 .btns.active h3,
.demo2 .btns.active p { -moz-transform: translateX(0px); -webkit-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.demo2 .btns.active span { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -ms-transition-delay: 0.2s;
}
.demo2 .btns.active h3 { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; -moz-transition-delay: 0.1s; -o-transition-delay: 0.1s; -ms-transition-delay: 0.1s;
}
/*DEMO 3*/
.demo3 .btns:hover span,
.demo3 .btns:hover h3 { -moz-transform: translateY(-20px); -webkit-transform: translateY(-20px); -o-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); opacity: 0;
}
.demo3 .btns:hover p { -moz-transform: translateY(20px); -webkit-transform: translateY(20px); -o-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px);
}
.demo3 .btns.active span,
.demo3 .btns.active h3,
.demo3 .btns.active p { -moz-transform: translateY(0px); -webkit-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); opacity: 1; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;
}
.demo3 .btns.active span { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -ms-transition-delay: 0.2s;
}
.demo3 .btns.active h3 { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; -moz-transition-delay: 0.1s; -o-transition-delay: 0.1s; -ms-transition-delay: 0.1s;
}
/*DEMO 4*/
.demo4 .btns:hover span,
.demo4 .btns:hover h3,
.demo4 .btns:hover p { -moz-transform: translateY(250px); -webkit-transform: translateY(250px); -o-transform: translateY(250px); -ms-transform: translateY-250px); transform: translateY(250px);
}
.demo4 .btns.active span,
.demo4 .btns.active h3,
.demo4 .btns.active p { -moz-transform: translateY(0px); -webkit-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.demo4 .btns.active p { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -ms-transition-delay: 0.2s;
}
.demo4 .btns.active h3 { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; -moz-transition-delay: 0.1s; -o-transition-delay: 0.1s; -ms-transition-delay: 0.1s;
}
@-webkit-keyframes wobble { 0% { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } 100% { -webkit-transform: none; transform: none; }
}
@-moz-keyframes wobble { 0% { -moz-transform: none; transform: none; } 15% { -moz-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -moz-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -moz-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -moz-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -moz-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } 100% { -moz-transform: none; transform: none; }
}
@keyframes wobble { 0% { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } 100% { -webkit-transform: none; transform: none; }
}
.wobble { -webkit-animation-name: wobble; animation-name: wobble; -moz-animation-name: wobble; -o-animation-name: wobble; -moz-animation-duration: 0.4s; -webkit-animation-duration: 0.4s; animation-duration: 0.4s; -o-animation-duration: 0.4s;
}

Hot Bottons - Script Codes JS Codes

/******************* ANIMATION BUTTONS	*******************/	$(".btns").hover(function () {	$(this).delay(10).queue(function(){	$(this).addClass('active').clearQueue();	});	}, function () {	$(this).removeClass('active');	});	$('.nav li').click(function(){	$('.nav li').removeClass('active');	$(this).addClass('active');	var i = $(this).index();	var classNumber = i+1;	$('.widget').removeClass('demo1 demo2 demo3 demo4 wobble').addClass('demo'+classNumber);	$('.widget').delay(10).queue(function(){	$(this).addClass('wobble').clearQueue();	});	});
Hot Bottons - Script Codes
Hot Bottons - Script Codes
Home Page Home
Developer Junaid Khalid
Username JunaidKhalid
Uploaded November 30, 2022
Rating 3
Size 3,770 Kb
Views 16,192
Do you need developer help for Hot Bottons?

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!

Junaid Khalid (JunaidKhalid) Script Codes
Name
A Pen by Junaid Khalid
Sliding CSS Demo and Download Buttons
Table For Phone Specification
Contact page
Email Subscription Widget for Blogger
Custom HTML5 Audio Player
Profile Card with social buttons
Font Awesome Social Icon Practice
Social Share icons for blogger
Ribbon Hover CSS3 Navigation Menu
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!