Close button with css and jquery

Developer
Salman Raza
Size
2,661 Kb
Views
34,408
  1. Close button with css and jquery Previews
  2. Close button with css and jquery HTML Codes
  3. Close button with css and jquery CSS Codes
  4. Close button with css and jquery JS Codes

How do I make an close button with css and jquery?

What is a close button with css and jquery? How do you make a close button with css and jquery? This script and codes were developed by Salman Raza on 02 November 2022, Wednesday.

Close button with css and jquery Previews
IQ Test

Close button with css and jquery - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Close button with css and jquery</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <main> <div class="sub_cnt"> <button class="hover" title="Hover On Me"> <span class="arrow"></span> </button> </div> <div class="sub_cnt"> <button class="focus" title="Click On Me"> <span class="arrow"></span> </button> </div> <div class="sub_cnt"> <button class="for_active" title="Click On Me"> <span class="arrow"></span> </button> </div> </main> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Close button with css and jquery - Script Codes CSS Codes

@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900');
@import url('https://fonts.googleapis.com/css?family=Playball');
body { background-image: linear-gradient(45deg, #fad0c4 0%, #fad0c4 1%, #ffd1ff 100%);
}
* { box-sizing: border-box;
}
main { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; min-width:800px;
}
main:after { content: 'Salman Raza'; font-family: 'Playball', cursive; position: absolute; bottom: -90px; left: 50%; color: rgba(0, 0, 0, 0.017); font-size: 150px; line-height: 140px; white-space: nowrap; text-transform: lowercase; transform: translateX(-50%); pointer-events: none; z-index: -1;
}
.sub_cnt { display: inline-block; width: 250px; max-width: 350px; height: 150px; line-height: 150px; background-color: #fff; text-align: center; box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 5px; position: relative; margin: 0 10px 10px 0;
}
.sub_cnt:after { position: absolute; top: -100px; left: 50%; transform: translateX(-50%); font-size: 20px; font-family: 'Lato', sans-serif; text-transform: uppercase; letter-spacing: 4px;
}
.sub_cnt:nth-of-type(1):after { content: '::hover'; }
.sub_cnt:nth-of-type(2):after { content: '::focus'; }
.sub_cnt:nth-of-type(3):after { content: '::active'; }
/* Button styles */
button { vertical-align: middle; position: relative; width: 80px; height: 80px; background-color: transparent; overflow: hidden; border:1px solid #333; transition: all 0.4s ease-in-out 0s; cursor: pointer;
}
.arrow,.arrow:after, button:after, button:before { position: absolute; top: 50%; transform: translate(-50%, -50%) rotate(45deg); left: 50%; width: 3px; height: 30px; background-color: #000; transition: all 0.4s ease-in-out 0s;
}
.arrow:after, button:after, button:before { content: ''; }
.arrow:after { transform: translate(0px, -100px); }
button:before { transform: translate(-50%, -50%) rotate(-45deg); }
button:after { transform: translate(-60px, -75px) rotate(-45deg); }
button:focus, button:focus .arrow:focus {outline: none;}
button.hover:hover:after,
button.focus:focus:after,
button.active:after
{ transform: translate(0px, -14px) rotate(-45deg);
}
button.hover:hover:before,
button.focus:focus:before,
button.active:before
{ transform: translate(60px, 45px) rotate(-45deg);
}
button.hover:hover .arrow,
button.focus:focus .arrow,
button.active .arrow
{ transform: translate(-61px, 45px) rotate(45deg);
}
button.hover:hover:after,
button.hover:hover .arrow:after,
button.focus:focus:after,
button.focus:focus .arrow:after,
button.active:after,
button.active .arrow:after
{ background-color: #fff;
}
button.hover:hover,
button.focus:focus,
button.active
{ background-color: red; border-color: red;
}

Close button with css and jquery - Script Codes JS Codes

// active class $(".for_active").click(function(){ var clas = $(".for_active").attr('class'); if(clas=='for_active'){ $(this).addClass("active"); } else { $(this).removeClass("active"); } });
Close button with css and jquery - Script Codes
Close button with css and jquery - Script Codes
Home Page Home
Developer Salman Raza
Username salmanraza
Uploaded November 02, 2022
Rating 3
Size 2,661 Kb
Views 34,408
Do you need developer help for Close button with css and jquery?

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!

Salman Raza (salmanraza) Script Codes
Name
App design
Testimonial carousel
Hamburger Menu Animation
Radio Button Animation Pure CSS
Event short details Card view
Event card View
A Pen by Salman Raza
Product showcase
Progress with CSS variables
Short Premium Event Card View
Create amazing art & images 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!