Button with stripe shadow

Developer
Jeremias Erbs
Size
3,602 Kb
Views
10,120
  1. Button with stripe shadow Previews
  2. Button with stripe shadow HTML Codes
  3. Button with stripe shadow CSS Codes

How do I make an button with stripe shadow?

Buttons with stripe shadow in different states.. What is a button with stripe shadow? How do you make a button with stripe shadow? This script and codes were developed by Jeremias Erbs on 09 December 2022, Friday.

Button with stripe shadow Previews
IQ Test

Button with stripe shadow - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Button with stripe shadow</title> <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> <em>Striped animated buttons</em>
<button class="btn">primary</button>
<div class="btn btn--2nd">secondary</div>
<a class="btn btn--3rd">tertiary</a>
<em><span class=highlight>Disabled </span>versions:</em>
<button class="btn disabled">disabled</button>
<div class="btn btn--2nd disabled">disabled</div>
<a class="btn btn--3rd disabled">disabled</a>
</body>
</html>

Button with stripe shadow - Script Codes CSS Codes

@import url("https://fonts.googleapis.com/css?family=Roboto+Slab");
* { box-sizing: border-box;
}
html { padding: 48px; height: 100%; background: lightslategray; font-family: 'Roboto Slab', serif;
}
body { margin: 0 auto; padding: 96px 0; height: 100%; background: #fefefe; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
em { border-bottom: 1px solid coral; padding-bottom: 5px; margin: 20px;
}
.btn { margin: 0 0 24px; -webkit-box-flex: 0; -ms-flex: none; flex: none;
}
.highlight { color: coral;
}
.btn { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-family: 'Roboto Slab', serif; padding: 12px 24px; font-size: 16px; line-height: 1.5; color: white; position: relative; width: 100%; max-width: 386px; text-align: center; cursor: pointer; z-index: 0; letter-spacing: 0.6px; -webkit-transition: letter-spacing 0.4s ease; transition: letter-spacing 0.4s ease; border: none; display: inline-block;
}
.btn:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: black; z-index: -1;
}
.btn--2nd { color: black;
}
.btn--2nd:before { background: white; border: 3px solid black;
}
.btn--2nd.disabled { color: #666;
}
.btn--2nd.disabled:before { border-color: #666; background: white !important;
}
.btn--3rd { color: black;
}
.btn--3rd:before { background: white; border: none;
}
.btn--3rd.disabled { color: #666;
}
.btn--3rd.disabled:before { border-color: #666; background: white !important;
}
.btn.disabled { cursor: default;
}
.btn.disabled:before { background: #999;
}
.btn.disabled:after { -webkit-transform: translate(6px, 6px); transform: translate(6px, 6px); background-image: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 7" %3E %3Cpath d="M -1 2 L 2 -1 M 0 8 L 8 0 M 7 8 L8 7" stroke="%23AAA" stroke-width="2"/%3E %3C/svg%3E');
}
.btn:hover:not(.disabled):after,
.btn.hover:after { -webkit-transform: translate(6px, 6px); transform: translate(6px, 6px); background-position: 28px 0;
}
.btn:focus { outline: none;
}
.btn.active:not(.disabled),
.btn:active:not(.disabled),
.btn:focus:not(.disabled) { letter-spacing: 3px;
}
.btn.active:not(.disabled):after,
.btn:active:not(.disabled):after,
.btn:focus:not(.disabled):after { -webkit-transform: translate(-6px, -6px); transform: translate(-6px, -6px); background-position: 28px 28px;
}
.btn:after { pointer-events: none; content: ''; background: white; background-image: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 7" %3E %3Cpath d="M -1 2 L 2 -1 M 0 8 L 8 0 M 7 8 L8 7" stroke="%23000" stroke-width="2"/%3E %3C/svg%3E'); background-size: 7px; display: block; position: absolute; height: 100%; left: 0; top: 0; -webkit-transform: translate(12px, 12px); transform: translate(12px, 12px); width: 100%; -webkit-transition: background-position 1s ease, -webkit-transform 0.3s ease; transition: background-position 1s ease, -webkit-transform 0.3s ease; transition: background-position 1s ease, transform 0.3s ease; transition: background-position 1s ease, transform 0.3s ease, -webkit-transform 0.3s ease; z-index: -2;
}
Button with stripe shadow - Script Codes
Button with stripe shadow - Script Codes
Home Page Home
Developer Jeremias Erbs
Username badabam
Uploaded December 09, 2022
Rating 3
Size 3,602 Kb
Views 10,120
Do you need developer help for Button with stripe shadow?

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!

Jeremias Erbs (badabam) Script Codes
Name
Working agreements
Angular Dropdown Directive
CSS3 Columns Example
Stiftung Warentest Signet
JS prototypical inheritance test
Open and slide out content
A 1x1 transparent base64 gif.
Animate SVG Smiley with AngularJS
Word combinator
Circle through values in array
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!