how to create Accessible Fancy Button
Before We Start
Every developers need, clean and modern elements to develop their websites, It contain pictures and a user interface element within a website. The most important one and the first section that the user sees when he/she enters a website. how to create Accessible Fancy Button
So if you are a person who wishes to develop a website, you have to know how to create that properly.
how to create Accessible Fancy Button
We are here to solve your problem. In this article we discuss how to create this elements. Before we start please read the below articles which easier you to understand the process, if you are new to development.
Step 1 – Add HTML
It’s too easy and simple. Just copy and paste below code in your HTML editor between <body> </body> tag.
<div class="wrapper">
<h3>Push</h3>
<a href="#" class="fancy-button bg-gradient1"><span><i class="fa fa-ticket"></i>Tickets</span></a>
<a href="#" class="fancy-button bg-gradient2"><span><i class="fa fa-plus"></i></span></a>
<br><br>
<h3>Magnet</h3>
<a href="#" class="fancy-button pop-onhover bg-gradient1"><span>Publish</span></a>
<a href="#" class="fancy-button pop-onhover bg-gradient3"><span><i class="fa fa-pencil"></i>Edit</span></a>
<h3>Solid to gradient</h3>
<a href="#" target="_blank" class="fancy-button pop-onhover bg-gradient4"><span>Save</span></a>
</div>
Step 2 – Add CSS
We use some external CSS link to this code. No need to worry about this, copy and paste below code between <style></style> tag.
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
Copy and paste below code in your HTML editor between <style></style> tag.
<style>
/* Mixins */
/* bg shortcodes */
.bg-gradient1 span,
.bg-gradient1:before {
background: #fa7e29;
background: -webkit-gradient(linear, left top, left bottom, from(#fa7e29), color-stop(80%, #F6682F), to(#F6682F));
background: linear-gradient(180deg, #fa7e29 0%, #F6682F 80%, #F6682F 100%);
}
.bg-gradient2 span,
.bg-gradient2:before {
background: #39C2C9;
background: -webkit-gradient(linear, left top, left bottom, from(#39C2C9), color-stop(80%, #3FC8C9), to(#3FC8C9));
background: linear-gradient(180deg, #39C2C9 0%, #3FC8C9 80%, #3FC8C9 100%);
}
.pop-onhover.bg-gradient3 span,
.pop-onhover.bg-gradient3:before {
background: #B9AEF0;
background: -webkit-gradient(linear, left top, left bottom, from(#B9AEF0), color-stop(80%, #ADA1EB), to(#ADA1EB));
background: linear-gradient(180deg, #B9AEF0 0%, #ADA1EB 80%, #ADA1EB 100%);
}
.bg-gradient4 span {
background: #F6682F;
background: -webkit-gradient(linear, left top, left bottom, from(#F6682F), color-stop(80%, #F6682F), to(#F6682F));
background: linear-gradient(180deg, #F6682F 0%, #F6682F 80%, #F6682F 100%);
}
/* General */
.wrapper {
margin: 4% auto;
text-align: center;
}
h3 {
color: #666a73;
font-weight: 300;
letter-spacing: 0.06em;
}
a {
text-decoration: none;
}
a:hover, a:focus, a:active {
text-decoration: none;
}
/* fancy Button */
.fancy-button {
display: inline-block;
margin: 20px;
font-family: 'Heebo', Helvetica, Arial, sans-serif;
font-weight: 500;
font-size: 16px;
letter-spacing: 0.07em;
text-transform: uppercase;
line-height: 24px;
color: #ffffff;
position: relative;
}
.fancy-button.bg-gradient1 {
text-shadow: 0px 0px 1px #BF4C28;
}
.fancy-button.bg-gradient2 {
text-shadow: 0px 0px 1px #227270;
}
.fancy-button.bg-gradient3 {
text-shadow: 0 0 1px #546082;
}
.fancy-button:before {
content: '';
display: inline-block;
height: 40px;
position: absolute;
bottom: -1px;
left: 10px;
right: 10px;
z-index: -1;
border-radius: 2em;
-webkit-filter: blur(14px) brightness(0.9);
filter: blur(14px) brightness(0.9);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.fancy-button i {
margin-top: -2px;
font-size: 1.265em;
vertical-align: middle;
}
.fancy-button span {
display: inline-block;
padding: 16px 20px;
border-radius: 50em;
position: relative;
z-index: 2;
will-change: transform, filter;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.fancy-button:focus {
color: #ffffff;
}
.fancy-button:hover {
color: #ffffff;
}
.fancy-button:hover span {
-webkit-filter: brightness(0.9) contrast(1.2);
filter: brightness(0.9) contrast(1.2);
-webkit-transform: scale(0.96);
transform: scale(0.96);
}
.fancy-button:hover:before {
bottom: 3px;
-webkit-filter: blur(6px) brightness(0.8);
filter: blur(6px) brightness(0.8);
}
.fancy-button:active span {
-webkit-filter: brightness(0.75) contrast(1.7);
filter: brightness(0.75) contrast(1.7);
}
.fancy-button.pop-onhover span {
border-radius: 4px;
}
.fancy-button.pop-onhover:before {
opacity: 0;
bottom: 10px;
}
.fancy-button.pop-onhover:hover:before {
bottom: -7px;
opacity: 1;
-webkit-filter: blur(16px);
filter: blur(16px);
}
.fancy-button.pop-onhover:hover span {
-webkit-transform: scale(1);
transform: scale(1);
}
.fancy-button.pop-onhover:hover:active span {
-webkit-filter: brightness(1) contrast(1);
filter: brightness(1) contrast(1);
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.fancy-button.pop-onhover:hover:active:before {
bottom: 0;
-webkit-filter: blur(5px) brightness(0.85);
filter: blur(5px) brightness(0.85);
-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.pop-onhover.bg-gradient3 span:hover {
background: #B9AEF0;
background: linear-gradient(120deg, #B9AEF0 0%, #ADA1EB 80%, #ADA1EB 100%);
}
.bg-gradient4:before {
bottom: 2px;
opacity: 0.6;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.bg-gradient4 {
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.bg-gradient4 span {
outline: 0px solid transparent;
}
.bg-gradient4:hover span {
background: #FC3D7C;
background: linear-gradient(-25deg, #FC3D7C 0%, #F76A34 80%, #F76A34 100%);
}
.bg-gradient4:focus span, .bg-gradient4:active span {
background: #FC3D7C;
background: linear-gradient(25deg, #FC3D7C 0%, #F76A34 80%, #F76A34 100%);
}
.bg-gradient4:focus span {
box-shadow: 0 0 9px #00FFF8;
}
.bg-gradient4:active span {
-webkit-filter: brightness(0.85) contrast(1.3);
filter: brightness(0.85) contrast(1.3);
}
.bg-gradient4 span {
text-transform: capitalize;
}
</style>
Step 3 – Add JavaScript
We use some external JavaScript link to this code. No need to worry about this, copy and paste below code between <head></head> tag.
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
At the end we will have something like this. You can change fonts, colors, backgrounds and all things that you want. Enjoy it.
Video Tutorial
Please watch this video to better understand this tutorial and don’t forget to subscribe to our channel.
Help others to find out about this article on Social Media sites. If you have any doubt or any problem, don’t hesitate to contact us. Thereafter we will be able to help you and also make sure you bookmark our site on your browser.
