A Pen by Kasper Mikiewicz

Developer
Kasper Mikiewicz
Size
2,950 Kb
Views
22,264
  1. A Pen by Kasper Mikiewicz Previews
  2. A Pen by Kasper Mikiewicz HTML Codes
  3. A Pen by Kasper Mikiewicz CSS Codes
  4. A Pen by Kasper Mikiewicz JS Codes

How do I make an a pen by kasper mikiewicz?

What is a a pen by kasper mikiewicz? How do you make a a pen by kasper mikiewicz? This script and codes were developed by Kasper Mikiewicz on 21 November 2022, Monday.

A Pen by Kasper Mikiewicz Previews
IQ Test

A Pen by Kasper Mikiewicz - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Kasper Mikiewicz</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html { background: #fff; font: 400 1em/1.5 sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
}
body { margin: 1em;
}
/** %[Object] Button */
/*------------------------------------*/
.btn { display: inline-block; vertical-align: middle; margin-bottom: 1em; cursor: pointer; border: none; height: 2em; padding: 0 1em; position: relative; line-height: 2; border-radius: 3px; color: #fff; text-decoration: none; text-shadow: 0 1px 2px rgba(0,0,0, .35);
}
.btn:hover,
.btn:active,
.btn:focus { opacity: 0.9; color: #eee; outline: none;
}
/*------------------------------------*/
.btn--small { font-size: .75em; }
.btn--large { font-size: 1.25em; }
.btn--huge { font-size: 1.75em; }
/*------------------------------------*/
.btn--primary { background: #00becc; }
.btn--secondary { background: #f32837; }
.btn--tertiary { background: #2d303c; }
/*------------------------------------*/
.btn--counter { margin-right: 3em;
}
.btn--counter span { color: #888; background: #fff; text-shadow: none; border-radius: 3px; border: 1px solid #ccc; top: 0; bottom: 0; left: 100%; padding: 0 .5em; margin-left: .7em; position: absolute;
}
.btn--counter span:after,
.btn--counter span:before { content: ''; width: 0; height: 0; right: 100%; top: 50%; margin-top: -.4em; position: absolute; border: .375em solid; border-left-width: 0; border-color: transparent #ccc transparent transparent;
}
.btn--counter span:after { border-right-color: #fff; margin-right: -2px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <p> <a href="#" class="btn btn--primary btn--small btn--counter">Love <span>1</span></a> <a href="#" class="btn btn--secondary btn--small btn--counter">Love <span>32</span></a> <a href="#" class="btn btn--tertiary btn--small btn--counter">Love <span>142</span></a> </p> <p> <a href="#" class="btn btn--primary btn--counter">Love <span>1</span></a> <a href="#" class="btn btn--secondary btn--counter">Love <span>32</span></a> <a href="#" class="btn btn--tertiary btn--counter">Love <span>142</span></a> </p> <p> <a href="#" class="btn btn--primary btn--large btn--counter">Love <span>1</span></a> <a href="#" class="btn btn--secondary btn--large btn--counter">Love <span>32</span></a> <a href="#" class="btn btn--tertiary btn--large btn--counter">Love <span>142</span></a> </p> <p> <a href="#" class="btn btn--primary btn--huge btn--counter">Love <span>1</span></a> <a href="#" class="btn btn--secondary btn--huge btn--counter">Love <span>32</span></a> <a href="#" class="btn btn--tertiary btn--huge btn--counter">Love <span>142</span></a> </p> <script src="js/index.js"></script>
</body>
</html>

A Pen by Kasper Mikiewicz - Script Codes CSS Codes

html { background: #fff; font: 400 1em/1.5 sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
}
body { margin: 1em;
}
/** %[Object] Button */
/*------------------------------------*/
.btn { display: inline-block; vertical-align: middle; margin-bottom: 1em; cursor: pointer; border: none; height: 2em; padding: 0 1em; position: relative; line-height: 2; border-radius: 3px; color: #fff; text-decoration: none; text-shadow: 0 1px 2px rgba(0,0,0, .35);
}
.btn:hover,
.btn:active,
.btn:focus { opacity: 0.9; color: #eee; outline: none;
}
/*------------------------------------*/
.btn--small { font-size: .75em; }
.btn--large { font-size: 1.25em; }
.btn--huge { font-size: 1.75em; }
/*------------------------------------*/
.btn--primary { background: #00becc; }
.btn--secondary { background: #f32837; }
.btn--tertiary { background: #2d303c; }
/*------------------------------------*/
.btn--counter { margin-right: 3em;
}
.btn--counter span { color: #888; background: #fff; text-shadow: none; border-radius: 3px; border: 1px solid #ccc; top: 0; bottom: 0; left: 100%; padding: 0 .5em; margin-left: .7em; position: absolute;
}
.btn--counter span:after,
.btn--counter span:before { content: ''; width: 0; height: 0; right: 100%; top: 50%; margin-top: -.4em; position: absolute; border: .375em solid; border-left-width: 0; border-color: transparent #ccc transparent transparent;
}
.btn--counter span:after { border-right-color: #fff; margin-right: -2px;
}

A Pen by Kasper Mikiewicz - Script Codes JS Codes

/* More freebies on: * http://designitcodeit.com */
A Pen by Kasper Mikiewicz - Script Codes
A Pen by Kasper Mikiewicz - Script Codes
Home Page Home
Developer Kasper Mikiewicz
Username Idered
Uploaded November 21, 2022
Rating 4
Size 2,950 Kb
Views 22,264
Do you need developer help for A Pen by Kasper Mikiewicz?

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!

Kasper Mikiewicz (Idered) Script Codes
Name
Universal focus, hover, active state for buttons
Responsive color picker
Hello bar
Flat switch
Comments thread
DragToIncDec
Pagination
Love button
Animated underline
Flat radio buttons
Create amazing video scripts 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!