A Pen by 042

Developer
042
Size
2,956 Kb
Views
6,072
  1. A Pen by 042 Previews
  2. A Pen by 042 HTML Codes
  3. A Pen by 042 CSS Codes
  4. A Pen by 042 JS Codes

How do I make an a pen by 042?

What is a a pen by 042? How do you make a a pen by 042? This script and codes were developed by 042 on 09 January 2023, Monday.

A Pen by 042 Previews
IQ Test

A Pen by 042 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by 042</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,300'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a class="m-btn" href="#">Lorem ipsum dolor</a>
<p>Hover to scroll to end of text</p><a class="b-btn" href="#">Lorem ipsum dolor</a>
<p>Hover to expand</p><a class="o-btn" href="#" title="Lorem ipsum dolor">Lorem ipsum dolor</a>
<p>Hover for native tool tip</p> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by 042 - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { font-family: 'Open Sans', sans-serif; padding: 1em;
}
p { margin: 1.25em 0;
}
.m-btn, .b-btn, .o-btn { display: inline-block; background: #3498DB; text-decoration: none; color: #fff; font-size: 72px; overflow: hidden; padding: 0.5em .5em; width: 300px; white-space: nowrap;
}
.m-btn span, .b-btn span, .o-btn span { display: block;
}
.m-btn, .o-btn { text-overflow: ellipsis;
}
.m-btn { border-radius: 0.2em;
}

A Pen by 042 - Script Codes JS Codes

String.prototype.width = function(font) { var f = font || '12px arial', o = $('<div>' + this + '</div>') .css({'position': 'absolute', 'float': 'left', 'white-space': 'nowrap', 'visibility': 'hidden', 'font': f}) .appendTo($('body')), w = o.width(); o.remove(); return w;
}
$('.m-btn').on('mouseenter', function(){ var textW = $(this).text().width("72px 'Open Sans'"); var a = $(this).width() - textW; console.log(textW); $(this).stop().animate({textIndent: a}, textW * 3);
}).on('mouseleave', function(){ var textW = $(this).text().width("72px 'Open Sans'"); $(this).stop().css({textIndent: '0px'});
});
$('.b-btn').on('mouseenter', function(){ var textW = $(this).text().width("72px 'Open Sans'"); var a = $(this).width() - textW; console.log(textW); $(this).stop().animate({width: 500}, 400, 'easeInOutQuart');
}).on('mouseleave', function(){ $(this).stop().animate({width: 300}, 400, 'easeInOutQuart');
});
A Pen by 042 - Script Codes
A Pen by 042 - Script Codes
Home Page Home
Developer 042
Username 042
Uploaded January 09, 2023
Rating 3
Size 2,956 Kb
Views 6,072
Do you need developer help for A Pen by 042?

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!

042 (042) Script Codes
Name
Animating characters with jQuery
Custom HTML Nested List Counters
Scrolling through cards with stepper
JCycle2 with HammerJS
Responsive Breakpoint Mixins
The Singapore Flag using Pure CSS
SR_02
Vertical Sprite with Greensock TweenMax
Smooth Scrolling With TweenMax
Fixed responsive layout
Create amazing marketing copy 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!