A Pen by Andy Merskin

Developer
Andy Merskin
Size
4,844 Kb
Views
34,408
  1. A Pen by Andy Merskin Previews
  2. A Pen by Andy Merskin HTML Codes
  3. A Pen by Andy Merskin CSS Codes
  4. A Pen by Andy Merskin JS Codes

How do I make an a pen by andy merskin?

What is a a pen by andy merskin? How do you make a a pen by andy merskin? This script and codes were developed by Andy Merskin on 10 August 2022, Wednesday.

A Pen by Andy Merskin Previews
IQ Test

A Pen by Andy Merskin - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Andy Merskin</title> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="center-me"> <div class="button"> <span class="icon-share"></span><span class="text">Share</span> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by Andy Merskin - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Titillium+Web:700);
body { background-color: #fff;
}
.center-me { width: 20px; margin: 50px auto; text-align: left;
}
.button { max-width: 20px; display: inline-block; padding: 5px 10px 5px; color: #E79736; background: #FAF6EF; text-align: left; font-family: "Titillium Web"; font-weight: 700; font-size: 14px; text-shadow: #fff 0 1px 0; border-radius: 5px; box-shadow: 0 2px 0 0 #F6E7D6; transition: max-width 0.5s ease, top 0.2s ease, background-color 0.05s ease, width 0.2s ease, box-shadow 0.2s ease; cursor: pointer;
}
.button:hover { max-width: 100px;
}
.button:hover > .text { /* visibility: visible; */ opacity: 1; transition: opacity 0.2s 0.1s ease;
}
.button:active { position: relative; top: 2px; background: #F7EBD8; box-shadow: 0 -2px 0 0 #F1DBC2; transition: top 0.05s ease, background-color 0.05s ease, box-shadow 0.05s ease;
}
.text { /* display: none; */ /* visibility: hidden; */ margin-left: 5px; transition: top 0.05s ease, opacity 0.2s 0s ease; opacity: 0;
}
::selection { background: transparent;
}
@font-face {	font-family: 'icomoon';	src:url('fonts/icomoon.eot');
}
@font-face {	font-family: 'icomoon';	src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRk9UVE8AAAR8AAsAAAAABlAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAABCAAAAV8AAAGKxHV/nUZGVE0AAAJoAAAAGgAAABxnxiwOR0RFRgAAAoQAAAAdAAAAIAAwAARPUy8yAAACpAAAAEsAAABgLwXbK2NtYXAAAALwAAAAOgAAAVLgFPLMaGVhZAAAAywAAAAwAAAANvxnyTtoaGVhAAADXAAAAB4AAAAkA2r/xGhtdHgAAAN8AAAADAAAAAwDgAAUbWF4cAAAA4gAAAAGAAAABgADUABuYW1lAAADkAAAAN4AAAGGUNbz7XBvc3QAAARwAAAADAAAACAAAwAAeJw9Tk0oRGEUvd/MG+8ZrzH0ZtL05jFjQ0mPsBybmUkpSZPY+dtMYRaamlKU1NCXklISG8lSMiVla6HGJHYWRJIskEjfQo7vCZtzzz23c89hpCjEGNPSo5mJTGaSmIsYxUTYJSy3qFG47ua6Ynkp2mqA83+iq7xbpIThMWm20iTymzRfZZJmsrlqUpwfGlVSkMLZyXTCtlvkSNq2/ZvyF0bE8myB3Iy5noUPLNncD2qMtQcgT3FQMNcHaihdgCLLIxwoLEc8wPtRPfBxte/Am7NGLXyVRF/ZD3fUd1B5tAdUEd+oBd2Mc1XyRJ2j6r9QEb+2QNlNW7puiyfA40wH8PoSAp4KB5xrQNF3CXQNL5aBHs5CoKVTNQDsHPqddgy4GxyQjt1+4HyqTZbLN2mcg7bWZOnt6TFL8s7rdlB+ohdYp2Mgt7IHrN4PeXxcGMpnSqRUn0gZPMB17zcvGKnaAHicY2BgYGQAgjO2i86D6LNHXObDaABOvQdkAAB4nGNgZGBg4ANiCQYQYGJgBEIQyQLmMQAABGAANQAAAHicY2BmPMA4gYGVgYNRmdGSgYHBDkpfZxBjKGZgYGJgZWaAAwEEkyEgzTWFweEB4wcGxob/Bxg0GBsYHBoYGBjhChSAkBEA/FcLMgB4nGNgYGBmgGAZBkYGEPAB8hjBfBYGAyDNAYRMIIkHjB8Y/v9HZikwCDBBdYEBIxsDMndEAgDKiQivAAB4nGNgZGBgAGLLR/J+8fw2Xxm4GQ8ARRjOHnGZj6D/H2A8wNgA5HIwMIFEAUXGC+l4nGNgZGBgbPh/gEGD8QADwz8HIAkUQQHMAIQXBS4AAAHAAAABwAAUAAAAAAAAUAAAAwAAeJx1jjFuwkAQRZ/BEEWJIqoo5Upp0tiyN9BwAB8gBT1CK8sSsNICUk5CxRFS5hg5QI6QY/Ax06RgpdG++ftn/gKPHMm4nIw7JsYD8ZvxkFc+jXPpX8YjHvgxHkv/kzPL76U89VMXHohfjIc0VMa59JPxiGe+jcfSf+lYEdmoIlvoVnETo+CDQMuBNUuS2tAe1ktB0/v2/Z3kCDg8pdIcc9X/fVfNM6VgpvLy1bxrTdzum5ja4HxZubmzXJGfFrPCV7VMt/62UGpip/drRt3nswhp12lHXVY3Z88ClznXAAB4nGNgZsALAAB9AAQ=) format('woff'), url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAANAIAAAwBQRkZUTWfGLA4AAAWYAAAAHEdERUYAMgAGAAAFeAAAACBPUy8yLuPbCgAAAVgAAABWY21hcOAW89MAAAHEAAABUmdhc3D//wADAAAFcAAAAAhnbHlmz1ysnQAAAyQAAACIaGVhZPxnyTsAAADcAAAANmhoZWEDav/GAAABFAAAACRobXR4BBUAFAAAAbAAAAAUbG9jYQA2AEQAAAMYAAAADG1heHAASQAoAAABOAAAACBuYW1lUNbz7QAAA6wAAAGGcG9zdJtVPjgAAAU0AAAAPAABAAAAAQAAQuYtKl8PPPUACwHAAAAAAM3ERJ8AAAAAzcREnwAA/8ABwAGAAAAACAACAAAAAAAAAAEAAAGA/8AAKAHAAAD+QAHAAAEAAAAAAAAAAAAAAAAAAAAFAAEAAAAFACUAAgAAAAAAAgAAAAEAAQAAAEAAAAAAAAAAAQHAAZAABQAIASMBOQAAAD4BIwE5AAAA1wAWAHMAAAIABQMAAAAAAAAAAAAAEAAAAAAAAAAAAAAAUGZFZABA4AHwAAGA/8AAKAGAAECAAAABAAAAAAAAAcAAAAAAAAAAlQAAAcAAFAAAAAAAAAADAAAAAwAAABwAAQAAAAAATAADAAEAAAAcAAQAMAAAAAgACAACAAAAAOAB8AD//wAAAADgAfAA//8AACACEAQAAQAAAAAAAAAAAAABBgAAAQAAAAAAAAABAgAAAAIAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAANgBEAAIAFAAAAa0BPwATACQAACUhNTM2NyMiBh0BFBYzITI2PQEHJxU3JxUiDgYHFT4BAUb+9zUOHnUJDAwJATIIDCkhh4cbLR8aDwwFAwEjPim4EhcMCeAJDAwJTCF3SGpmQAsTGBsbGRMFBjkiAAEAAP/AAcABgAACAAARASEBwP5AAYD+QAAAAAAAAAwAlgABAAAAAAABAAcAEAABAAAAAAACAAcAKAABAAAAAAADACMAeAABAAAAAAAEAAcArAABAAAAAAAFAAsAzAABAAAAAAAGAAcA6AADAAEECQABAA4AAAADAAEECQACAA4AGAADAAEECQADAEYAMAADAAEECQAEAA4AnAADAAEECQAFABYAtAADAAEECQAGAA4A2ABpAGMAbwBtAG8AbwBuAABpY29tb29uAABSAGUAZwB1AGwAYQByAABSZWd1bGFyAABGAG8AbgB0AEYAbwByAGcAZQAgADIALgAwACAAOgAgAGkAYwBvAG0AbwBvAG4AIAA6ACAAMgA0AC0ANQAtADIAMAAxADMAAEZvbnRGb3JnZSAyLjAgOiBpY29tb29uIDogMjQtNS0yMDEzAABpAGMAbwBtAG8AbwBuAABpY29tb29uAABWAGUAcgBzAGkAbwBuACAAMQAuADAAAFZlcnNpb24gMS4wAABpAGMAbwBtAG8AbwBuAABpY29tb29uAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABQAAAAEAAgECAQMHdW5pRTAwMQd1bmlGMDAwAAAAAf//AAIAAQAAAA4AAAAYAAAAAAACAAEAAwAEAAEABAAAAAIAAAAAAAEAAAAAzD2izwAAAADNxESfAAAAAM3ERJ8=) format('truetype');	font-weight: normal;	font-style: normal;
}
/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {	font-family: 'icomoon';	content: attr(data-icon);	speak: none;	font-weight: normal;	font-variant: normal;	text-transform: none;	line-height: 1;	-webkit-font-smoothing: antialiased;
}
/* Use the following CSS code if you want to have a class per icon */
/*
Instead of a list of all class selectors,
you can use the generic selector below, but it's slower:
[class*="icon-"] {
*/
.icon-share { position: relative; top: 1px;	font-family: 'icomoon';	speak: none;	font-style: normal;	font-weight: normal;	font-variant: normal; font-size: 20px;	text-transform: none;	line-height: 20px;	-webkit-font-smoothing: antialiased;
}
.icon-share:before {	content: "\e001";
}

A Pen by Andy Merskin - Script Codes JS Codes

$button = $('.button');
$buttonText = $('.text');
$clone = $button.clone(true);
$clone.css('display', 'none');
$('body').append($clone);
$clone.children('.text').show();
$short = $button.width();
$long = $clone.width();
$button.width($short);
/*$button.hover( function() { $button.width($long); $buttonText.delay(200).fadeIn({duration: 200, queue: false});
}, function() { $button.width($short); $buttonText.fadeOut({duration:50, queue: false});
});*/
// Easing function
$.extend($.easing,
{ easeInOutExpo: function (x, t, b, c, d) { if (t==0) return b; if (t==d) return b+c; if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b; return c/2 * (-Math.pow(2, -10 * --t) + 2) + b; }
});
A Pen by Andy Merskin - Script Codes
A Pen by Andy Merskin - Script Codes
Home Page Home
Developer Andy Merskin
Username andymerskin
Uploaded August 10, 2022
Rating 3
Size 4,844 Kb
Views 34,408
Do you need developer help for A Pen by Andy Merskin?

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!

Andy Merskin (andymerskin) Script Codes
Name
Vue.js Recipe - Slideout Menu
Vue List Transitions - Bug Test
Vue.js Starter
Animated Dropdowns with scaleY
SASS Easings
Vue.js Intro Demo
Table Row Peek
Spotr - Basic Example
Parallax Depth Cards
Wires Loading Animation
Create amazing SEO content 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!