CSS arrow buttons

Developer
Giana
Size
3,371 Kb
Views
74,888
  1. CSS arrow buttons Previews
  2. CSS arrow buttons HTML Codes
  3. CSS arrow buttons CSS Codes

How do I make an css arrow buttons?

Sass mixin for creating arrow buttons. Uses transform: skew on pseudo-elements.. What is a css arrow buttons? How do you make a css arrow buttons? This script and codes were developed by Giana on 12 June 2022, Sunday.

CSS arrow buttons Previews
IQ Test

CSS arrow buttons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS arrow buttons</title> <link href='http://fonts.googleapis.com/css?family=Noto+Sans' 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> <h1>Sign-post arrow buttons</h1>
<p><button class="btn-right"><a href="#">Right</a></button></p>
<p><button class="btn-left"><a href="#">Left</a></button></p>
<p><button class="btn-up"><a href="#">Up</a></button> <button class="btn-down"><a href="#">Down</a></button></p>
</body>
</html>

CSS arrow buttons - Script Codes CSS Codes

/* The button-maker */
/* How to include it */
.btn-right { background: none; border: 0; font-size: 22px; line-height: 2em; position: relative; width: 8em; height: 2em;
}
.btn-right a { color: #fff; text-decoration: none; position: relative; z-index: 10;
}
.btn-right::before, .btn-right::after { background: #29c0d5; border-radius: 2px; content: ''; display: block; position: absolute; left: 0; right: 0; -webkit-transition: all 1s; transition: all 1s; height: 1em;
}
.btn-right::before { box-shadow: -1px 1px 0 #1897c0, -2px 2px 0 #1897c0, -3px 3px 0 #1897c0, -4px 4px 0 #1897c0; -webkit-transform: skew(45deg); transform: skew(45deg); top: 0;
}
.btn-right::after { box-shadow: 1px 1px 0 #1897c0, 2px 2px 0 #1897c0, 3px 3px 0 #1897c0, 4px 4px 0 #1897c0; -webkit-transform: skew(-45deg); transform: skew(-45deg); bottom: 0;
}
.btn-right:hover::before, .btn-right:hover::after { background: #68d3e2;
}
.btn-right:focus { outline: 0;
}
.btn-right:focus::before, .btn-right:focus::after { background: #68d3e2;
}
.btn-left { background: none; border: 0; font-size: 22px; line-height: 2em; position: relative; width: 8em; height: 2em;
}
.btn-left a { color: #fff; text-decoration: none; position: relative; z-index: 10;
}
.btn-left::before, .btn-left::after { background: #e4135d; border-radius: 2px; content: ''; display: block; position: absolute; left: 0; right: 0; -webkit-transition: all 1s; transition: all 1s; height: 1em;
}
.btn-left::before { box-shadow: -1px 1px 0 #c81163, -2px 2px 0 #c81163, -3px 3px 0 #c81163, -4px 4px 0 #c81163; -webkit-transform: skew(45deg); transform: skew(45deg); bottom: 0; z-index: 1;
}
.btn-left::after { box-shadow: 1px 1px 0 #c81163, 2px 2px 0 #c81163, 3px 3px 0 #c81163, 4px 4px 0 #c81163; -webkit-transform: skew(-45deg); transform: skew(-45deg); top: 0;
}
.btn-left:hover::before, .btn-left:hover::after { background: #f1538b;
}
.btn-left:focus { outline: 0;
}
.btn-left:focus::before, .btn-left:focus::after { background: #f1538b;
}
.btn-up { background: none; border: 0; font-size: 22px; line-height: 3em; position: relative; width: 4em; height: 3em; -webkit-transform: rotate(-90deg); transform: rotate(-90deg);
}
.btn-up a { color: #fff; text-decoration: none; position: relative; z-index: 10;
}
.btn-up::before, .btn-up::after { background: #e4135d; border-radius: 2px; content: ''; display: block; position: absolute; left: 0; right: 0; -webkit-transition: all 1s; transition: all 1s; height: 1.5em;
}
.btn-up::before { box-shadow: -1px 1px 0 #c81163, -2px 2px 0 #c81163, -3px 3px 0 #c81163, -4px 4px 0 #c81163; -webkit-transform: skew(45deg); transform: skew(45deg); top: 0;
}
.btn-up::after { box-shadow: 1px 1px 0 #c81163, 2px 2px 0 #c81163, 3px 3px 0 #c81163, 4px 4px 0 #c81163; -webkit-transform: skew(-45deg); transform: skew(-45deg); bottom: 0;
}
.btn-up:hover::before, .btn-up:hover::after { background: #f1538b;
}
.btn-up:focus { outline: 0;
}
.btn-up:focus::before, .btn-up:focus::after { background: #f1538b;
}
.btn-down { background: none; border: 0; font-size: 22px; line-height: 4em; position: relative; width: 6em; height: 4em; -webkit-transform: rotate(90deg); transform: rotate(90deg); margin-top: 3em;
}
.btn-down a { color: #fff; text-decoration: none; position: relative; z-index: 10;
}
.btn-down::before, .btn-down::after { background: #29c0d5; border-radius: 2px; content: ''; display: block; position: absolute; left: 0; right: 0; -webkit-transition: all 1s; transition: all 1s; height: 2em;
}
.btn-down::before { box-shadow: -1px 1px 0 #1897c0, -2px 2px 0 #1897c0, -3px 3px 0 #1897c0, -4px 4px 0 #1897c0; -webkit-transform: skew(45deg); transform: skew(45deg); top: 0;
}
.btn-down::after { box-shadow: 1px 1px 0 #1897c0, 2px 2px 0 #1897c0, 3px 3px 0 #1897c0, 4px 4px 0 #1897c0; -webkit-transform: skew(-45deg); transform: skew(-45deg); bottom: 0;
}
.btn-down:hover::before, .btn-down:hover::after { background: #68d3e2;
}
.btn-down:focus { outline: 0;
}
.btn-down:focus::before, .btn-down:focus::after { background: #68d3e2;
}
@-webkit-keyframes zoom { 25% { -webkit-transform: scale3d(1.5, 1.5, 0); transform: scale3d(1.5, 1.5, 0); } 50% { -webkit-transform: scale3d(1, 1, 0); transform: scale3d(1, 1, 0); } 75% { -webkit-transform: scale3d(1.25, 1.25, 0); transform: scale3d(1.25, 1.25, 0); }
}
@keyframes zoom { 25% { -webkit-transform: scale3d(1.5, 1.5, 0); transform: scale3d(1.5, 1.5, 0); } 50% { -webkit-transform: scale3d(1, 1, 0); transform: scale3d(1, 1, 0); } 75% { -webkit-transform: scale3d(1.25, 1.25, 0); transform: scale3d(1.25, 1.25, 0); }
}
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
/* Page styling */
body { background: #fefefe; font-family: "Noto sans", sans-serif; text-align: center; margin: 3em 0;
}
h1 { color: #0b1421; font-weight: 400;
}
button a { top: -2px;
}
CSS arrow buttons - Script Codes
CSS arrow buttons - Script Codes
Home Page Home
Developer Giana
Username giana
Uploaded June 12, 2022
Rating 4.5
Size 3,371 Kb
Views 74,888
Do you need developer help for CSS arrow buttons?

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!

Giana (giana) Script Codes
Name
CSS-only directionally aware hover
CSS box shadow animation
Neon bubbles
Buttons with animated background
Cyber Cells
CSS background change on scroll
Galaxy
Spinning
CSS Gradient Text in Firefox
CSS Particles
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!