CSS Button with Angled Sides

Developer
Peter Hrynkow
Size
2,338 Kb
Views
32,384
  1. CSS Button with Angled Sides Previews
  2. CSS Button with Angled Sides HTML Codes
  3. CSS Button with Angled Sides CSS Codes

How do I make an css button with angled sides?

What is a css button with angled sides? How do you make a css button with angled sides? This script and codes were developed by Peter Hrynkow on 14 September 2022, Wednesday.

CSS Button with Angled Sides Previews
IQ Test

CSS Button with Angled Sides - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Button with Angled Sides</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link href='https://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a href="#" class="btn double">DEATH METAL</a> <a href="#" class="btn">DEATH METAL</a> <!-- SVG Filter for Firefox--> <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <filter id="f1" x="0" y="0" width="200%" height="200%"> <feOffset result="offOut" in="SourceGraphic" dx="10" dy="20" /> <feColorMatrix result="matrixOut" in="offOut" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0" /> <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="2" /> <feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> </filter> <filter id="f2" x="0" y="0" width="200%" height="200%"> <feOffset result="offOut" in="SourceGraphic" dx="5" dy="10" /> <feColorMatrix result="matrixOut" in="offOut" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0" /> <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="2" /> <feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> </filter>
</svg>
</body>
</html>

CSS Button with Angled Sides - Script Codes CSS Codes

 body { font-size: 16px/1.4; margin: 5em; background: #667; } .btn { display: inline-block; background: #333; border: .125em solid #000; padding: .5em 1em; position: relative; color: #fff; font: 1.5em/1.4 'Oswald', helvetica, arial, sans-serif; text-transform: uppercase; text-decoration: none; white-space: nowrap; -webkit-filter: drop-shadow(.5em 1em .25em rgba(0,0,0,.4)); -moz-filter: drop-shadow(.5em 1em .25em rgba(0,0,0,.4)); -o-filter: drop-shadow(.5em 1em .25em rgba(0,0,0,.4)); -ms-filter: drop-shadow(.5em 1em .25em rgba(0,0,0,.4)); filter: url(#f1); filter: drop-shadow(.5em .5em .25em rgba(0,0,0,.4)); margin-right: 3em; } .btn:active { -webkit-filter: drop-shadow(.25em .5em .25em rgba(0,0,0,.4)); -moz-filter: drop-shadow(.25em .5em .25em rgba(0,0,0,.4)); -o-filter: drop-shadow(.25em .5em .25em rgba(0,0,0,.4)); -ms-filter: drop-shadow(.25em .5em .25em rgba(0,0,0,.4)); filter: url(#f2); filter: drop-shadow(.25em .5em .25em rgba(0,0,0,.4)); -webkit-transform: translate(.25em, .5em); -moz-transform: translate(.25em, .5em); transform: translate(.25em, .5em); } .btn.double:before, .btn:after { content: ""; position: absolute; display: block; background: #333; border: .125em solid #000; width: 1.125em; height: 100%; top: -.125em; -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; transform-origin: bottom left; } .btn:after { right: -.25em; -webkit-transform: skewX(-20deg); -moz-transform: skewX(-20deg); transform: skewX(-20deg); border-left: none; } .btn.double:before { left: -.25em; -webkit-transform: skewX(20deg); -moz-transform: skewX(20deg); transform: skewX(20deg); border-right: none; }
CSS Button with Angled Sides - Script Codes
CSS Button with Angled Sides - Script Codes
Home Page Home
Developer Peter Hrynkow
Username peterhry
Uploaded September 14, 2022
Rating 3.5
Size 2,338 Kb
Views 32,384
Do you need developer help for CSS Button with Angled Sides?

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!

Peter Hrynkow (peterhry) Script Codes
Name
Ripple Effect
Rolldown List
Holographic Projection
Juicy Red Button
Source Order Switching
CSS Starbursts
Curved type with SVG
Word Wrap Algorithm for Multiline Canvas Text
Dot Ripple CSS
T-Shape Visualization
Create amazing blog posts 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!