w3tweaks.com
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
Home Essentials

3D CSS button plus jQuery

W3TWEAKS by W3TWEAKS
September 30, 2019
in Essentials, Navigation, Script

jQuery + 3D css button.Button created for the gamers league project v2 version. 3D button developed using CSS, HTML and jQuery. Demo and download available.

You might also like

Understanding JavaScript Variable Declarations

A Comprehensive Guide to JavaScript Variable Declarations

January 25, 2023
Unlocking the Power of JavaScript Comments

Unlocking the Power of JavaScript Comments

January 20, 2023

Demo Download

AuthorCarlos G Notario
CreatedMAY 28, 2015
LicenseOpen
Compatible browsersChrome, Firefox, Safari

HTML Snippet

<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

<link href='https://fonts.googleapis.com/css?family=Montserrat:700' rel='stylesheet' type='text/css'>

<a class="square" href="#">
    <div class="burgerwrap">
        <span></span>
        <span></span>
        <span></span>
    </div>
</a>

<a href="#" class="boton">
Fantastic    
</a>

CSS Code

 html, body {
        background: #1f1d21;
    }
    
    .boton {
        width: 200px;
        height: 50px;
        margin: 200px auto;
        display: block;
        position: relative;
    }
    
    .botontext {
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: 1;
        text-align: center;
        line-height: 50px;
        font-family: 'Montserrat', sans-serif;
        font-size: 12px;
        text-transform: uppercase;
    }
    
    .twist {
        display: block;
        height: 100%;
        width: 25%;
        position: relative;
        float: left;
        margin-left: -4px;
    }
    
    .twist:before {
        content: "";
        width: 100%;
        height: 100%;
        background: #fed5a9;
        bottom: 100%;
        position: absolute;
        transform-origin: center bottom 0px; 
        transform: matrix3d(1, 0, 0, 0, 
                            0, 0, -1, -0.003, 
                            0, 1, 0, 0, 
                            0, 0, 0, 1);
        
-webkit-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
   -moz-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
     -o-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
        transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
    }
    
    .square:hover span {
        margin-left: 26px;
    }
    
    .square:hover span:after {
        left: 5px;
    }
    
    .square span:nth-of-type(1),
    .square span:nth-of-type(1):after {
        transition-delay: 0.1s;
    }
    
    .square span:nth-of-type(2),
    .square span:nth-of-type(2):after {
        transition-delay: 0.2s;
    }
    
    .square span:nth-of-type(3),
    .square span:nth-of-type(3):after {
        transition-delay: 0.3s;
    }

JavaScript Snippet

 $(window).ready(function(){
$(".boton").wrapInner('<div class=botontext></div>');
    
    $(".botontext").clone().appendTo( $(".boton") );
    
    $(".boton").append('<span class="twist"></span><span class="twist"></span><span class="twist"></span><span class="twist"></span>');
    
    $(".twist").css("width", "25%").css("width", "+=3px");
});

Preview

3D CSS button plus jQuery 1

Tags: ButtonCSScss buttonscss effectscss hover effectseffecteffectsessentialsHamburger Menuhoverhover animationHover effectshtmljquerymouse hover effects
Previous Post

Three Simple CSS Animation Button Hover Effects practice

Next Post

Pressable, iOS Compatible CSS Button

W3TWEAKS

W3TWEAKS

Since I've had a strong background in front-end development, I took the initiative to start my own website (w3tweaks.com) to share my knowledge with the world.

Related Stories

Understanding JavaScript Variable Declarations

A Comprehensive Guide to JavaScript Variable Declarations

by W3TWEAKS
January 25, 2023

If you want to become a better JavaScript programmer, mastering JavaScript variable declarations is a great first step. This article...

Unlocking the Power of JavaScript Comments

Unlocking the Power of JavaScript Comments

by W3TWEAKS
January 20, 2023

Comments allow developers to document their code and make it easier to understand for other developers and maintainers. Comments can...

JavaScript Types and the typeof Operator

A Comprehensive Guide to JavaScript Types and the typeof Operator

by W3TWEAKS
January 20, 2023

JavaScript is a very versatile language, and with it come several different JavaScript types of data that can be used...

Running JavaScript Programs: Tips and Techniques for Beginners

Running JavaScript Programs: Tips and Techniques for Beginners

by W3TWEAKS
January 20, 2023

Running JavaScript programs can often be tricky for beginners, as the language itself may be unfamiliar. However, there are a...

Next Post

Pressable, iOS Compatible CSS Button

Discussion about this post

Popular Posts

100 Creative CSS Cards

41 Multi step HTML forms

13 Free HTML & CSS Dashboard Template Designs

20 HTML & CSS pricing tables

49 CSS Tables

14 Best CSS Dark Mode

11 CSS Shopping Cart UI/UX

42 Cool CSS Avatars For Better UI

89 Best CSS Toggle Switches

55 Useful handpicked CSS Buttons with examples and demos

w3tweaks

We bring you the best frontend collections that will fix perfect for news, magazine, personal blog, etc. Check our landing page for details.

  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools