Modern Web Button

Developer
Brock Nunn
Size
3,264 Kb
Views
4,048
  1. Modern Web Button Previews
  2. Modern Web Button HTML Codes
  3. Modern Web Button CSS Codes

How do I make an modern web button?

I hust wanted to create an ultra clickable button useful for just about any application. . What is a modern web button? How do you make a modern web button? This script and codes were developed by Brock Nunn on 06 January 2023, Friday.

Modern Web Button Previews
IQ Test

Modern Web Button - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Modern Web Button</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet"> <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> <div class="wrap"> <a href="#" class="nice-button orange">button <span><i class="icon-angle-right"></i></span></a>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Modern Web Button - Script Codes CSS Codes

body { background: #fff; background-image: url(https://subtlepatterns.com/patterns/noisy_net.png);
}
.wrap { width: 50%; margin: 5% auto; text-align: center;
}
.orange { background: #ed9d4e; /* Old browsers */ background: -moz-linear-gradient(top, #ed9d4e 0%, #ed850e 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ed9d4e), color-stop(100%, #ed850e)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ed9d4e 0%, #ed850e 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ed9d4e 0%, #ed850e 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ed9d4e 0%, #ed850e 100%); /* IE10+ */ background: linear-gradient(to bottom, #ed9d4e 0%, #ed850e 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed9d4e', endColorstr='#ed850e', GradientType=0); /* IE6-9 */ color: #fff;
}
.orange:hover { background: #ed850e; /* Old browsers */ background: -moz-linear-gradient(top, #ed850e 0%, #ed9d4e 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ed850e), color-stop(100%, #ed9d4e)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ed850e 0%, #ed9d4e 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ed850e 0%, #ed9d4e 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ed850e 0%, #ed9d4e 100%); /* IE10+ */ background: linear-gradient(to bottom, #ed850e 0%, #ed9d4e 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed850e', endColorstr='#ed9d4e', GradientType=0); /* IE6-9 */
}
.orange:active { position: relative; top: 2px;
}
.nice-button { text-shadow: 0px -1px 0px #8d4f08; text-transform: uppercase; font-size: 20px; padding: .75em 1.5em; border-radius: 5px; text-decoration: none; border: 1px solid #834a08; box-shadow: 0px 4px 0px -1px #5d3405, 0px 4px 5px rgba(0, 0, 0, 0.55), inset 0px 0px 0px 1px rgba(255, 255, 255, 0.15);
}
.nice-button span { padding-left: 10px;
}
.nice-button:active { position: relative; top: 4px; box-shadow: none; -webkit-transition: all 0.09s ease-out; /* Chrome 1-25, Safari 3.2+ */ -moz-transition: all 0.09s ease-out; /* Firefox 4-15 */ -o-transition: all 0.09s ease-out; /* Opera 10.50–12.00 */ transition: all 0.09s ease-out; /* Chrome 26, Firefox 16+, IE 10+, Opera 12.50+ */
}
Modern Web Button - Script Codes
Modern Web Button - Script Codes
Home Page Home
Developer Brock Nunn
Username banunn
Uploaded January 06, 2023
Rating 3
Size 3,264 Kb
Views 4,048
Do you need developer help for Modern Web Button?

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!

Brock Nunn (banunn) Script Codes
Name
Simple Login Form Template
Article Cards
Learning Flexbox
Simple jQuery .fadeToggle demo
Off Canvas Navigation
Super Simple Slideshow
A Pen by Brock Nunn
Tooltip Pulse
Simple Responsive Navigation
JQuery Add and Remove Items
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!