Delicious SASS Buttons

Developer

Size

8,496 Kb

Views

20,240

Delicious SASS Buttons Previews
Delicious SASS Buttons HTML Codes
Delicious SASS Buttons CSS Codes

How do I make an delicious sass buttons?

A nice clean button set I made to familiarize myself with SASS.. What is a delicious sass buttons? How do you make a delicious sass buttons? This script and codes were developed by Keith Pickering on 10 August 2022, Wednesday.

Delicious SASS Buttons Previews

Delicious SASS Buttons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Delicious SASS Buttons</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/ngvzh.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
@import url(http://fonts.googleapis.com/css?family=Roboto:700,400,300);
@import url(http://fonts.googleapis.com/css?family=Pacifico);
/* Colors from http://clrs.cc/ */
*, *:before, *:after { box-sizing: border-box;
}
body { font-family: "Roboto", sans-serif; background-color: #dedede; color: #666; height: 100%;
}
.container { width: 700px; margin: 5rem auto; padding: 4rem 2rem; text-align: center; background-color: #fff; border: 1px solid #ccc; border-radius: 0;
}
h1, h2 { font-family: 'Pacifico', sans-serif; font-weight: 400; word-spacing: .25rem;
}
h1 { font-size: 3rem; line-height: 1.2; margin-top: 0;
}
h2 { margin-top: 4rem;
}
small { font-family: "Roboto", sans-serif; font-size: 1rem; font-weight: 200; word-spacing: normal; color: #777;
}
/* Begin button styles */
.button,
[class*='button--'] { position: relative; display: inline-block; vertical-align: middle; margin: 0 16px 20px 0; /* REM fallback */ margin: 0 1rem calc(1rem + 4px) 0; /* Account for extra height from box shadow */ padding: 1em 2em; font-weight: 200; text-decoration: none; color: white; border-radius: 0; transition: all .25s; transform: translate(0, -2px); background-color: #bada55; box-shadow: 0 2px 0 #9eb948;
}
.button:hover, .button:focus,
[class*='button--']:hover,
[class*='button--']:focus { color: white; outline: none; box-shadow: none; transform: translate(0, 0);
}
.button:hover, .button:focus,
[class*='button--']:hover,
[class*='button--']:focus { background-color: #cbe380;
}
.button:active,
[class*='button--']:active { background-color: #bada55;
}
.button--red { background-color: #FF4136; box-shadow: 0 2px 0 #d9372e;
}
.button--red:hover, .button--red:focus { background-color: #ff7168;
}
.button--red:active { background-color: #FF4136;
}
.button--orange { background-color: #FF851B; box-shadow: 0 2px 0 #d97117;
}
.button--orange:hover, .button--orange:focus { background-color: #ffa454;
}
.button--orange:active { background-color: #FF851B;
}
.button--yellow { background-color: #FFDC00; box-shadow: 0 2px 0 #d9bb00;
}
.button--yellow:hover, .button--yellow:focus { background-color: #ffe540;
}
.button--yellow:active { background-color: #FFDC00;
}
.button--lime { background-color: #01FF70; box-shadow: 0 2px 0 #01d95f;
}
.button--lime:hover, .button--lime:focus { background-color: #41ff94;
}
.button--lime:active { background-color: #01FF70;
}
.button--green { background-color: #2ECC40; box-shadow: 0 2px 0 #27ad36;
}
.button--green:hover, .button--green:focus { background-color: #62d970;
}
.button--green:active { background-color: #2ECC40;
}
.button--olive { background-color: #3D9970; box-shadow: 0 2px 0 #34825f;
}
.button--olive:hover, .button--olive:focus { background-color: #6eb394;
}
.button--olive:active { background-color: #3D9970;
}
.button--teal { background-color: #39CCCC; box-shadow: 0 2px 0 #30adad;
}
.button--teal:hover, .button--teal:focus { background-color: #6bd9d9;
}
.button--teal:active { background-color: #39CCCC;
}
.button--aqua { background-color: #7FDBFF; box-shadow: 0 2px 0 #6cbad9;
}
.button--aqua:hover, .button--aqua:focus { background-color: #9fe4ff;
}
.button--aqua:active { background-color: #7FDBFF;
}
.button--blue { background-color: #0074D9; box-shadow: 0 2px 0 #0063b8;
}
.button--blue:hover, .button--blue:focus { background-color: #4097e3;
}
.button--blue:active { background-color: #0074D9;
}
.button--purple { background-color: #B10DC9; box-shadow: 0 2px 0 #960bab;
}
.button--purple:hover, .button--purple:focus { background-color: #c54ad7;
}
.button--purple:active { background-color: #B10DC9;
}
.button--fuchsia { background-color: #F012BE; box-shadow: 0 2px 0 #cc0fa2;
}
.button--fuchsia:hover, .button--fuchsia:focus { background-color: #f44dce;
}
.button--fuchsia:active { background-color: #F012BE;
}
.button--maroon { background-color: #85144B; box-shadow: 0 2px 0 #711140;
}
.button--maroon:hover, .button--maroon:focus { background-color: #a44f78;
}
.button--maroon:active { background-color: #85144B;
}
.button--navy { background-color: #001F3F; box-shadow: 0 2px 0 #001a36;
}
.button--navy:hover, .button--navy:focus { background-color: #40576f;
}
.button--navy:active { background-color: #001F3F;
}
.button--black { background-color: #333; box-shadow: 0 2px 0 #2b2b2b;
}
.button--black:hover, .button--black:focus { background-color: #666666;
}
.button--black:active { background-color: #333;
}
.button--gray { background-color: #888; box-shadow: 0 2px 0 #747474;
}
.button--gray:hover, .button--gray:focus { background-color: #a6a6a6;
}
.button--gray:active { background-color: #888;
}
.button--white { background-color: #eee; box-shadow: 0 2px 0 #cacaca;
}
.button--white:hover, .button--white:focus { background-color: #f2f2f2;
}
.button--white:active { background-color: #eee;
}
/* Make text dark on buttons that have light background-colors */
.button--yellow,
.button--lime,
.button--aqua,
.button--white { color: rgba(0, 0, 0, 0.5);
}
.button--yellow:hover,
.button--lime:hover,
.button--aqua:hover,
.button--white:hover { color: rgba(0, 0, 0, 0.5);
}
/* Sizes */
.button--large { font-size: 32px; font-size: 2rem; padding-top: .5em; padding-bottom: .5em;
}
.button--small { font-size: 13px; font-size: .8rem; padding: .5em 1.5em;
}
/* Alignment */
.button--align-top { vertical-align: top;
}
.button--align-bottom { vertical-align: bottom;
}
/* Icons */
.button--icon { padding-left: 4em; padding-right: 1em;
}
.button--icon > i { position: absolute; top: 50%; left: 1em; margin-top: -.5em;
}
.button--icon:before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3em; border-radius: 0 0 0 0; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.25); transition: all .25s;
}
.button--icon:hover:before { box-shadow: none;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container"> <h1> Delicious SASS Buttons!<br> <small>By <a href="http://keithpickering.net">Keith Pickering</a></small> </h1> <h2>Normal</h2> <a href="#" class="button--red">Button</a> <a href="#" class="button--green">Button</a> <a href="#" class="button--blue">Button</a> <a href="#" class="button--navy">Button</a> <a href="#" class="button--orange">Button</a> <a href="#" class="button--olive">Button</a> <a href="#" class="button--purple">Button</a> <a href="#" class="button--black">Button</a> <a href="#" class="button--yellow">Button</a> <a href="#" class="button--teal">Button</a> <a href="#" class="button--fuchsia">Button</a> <a href="#" class="button--gray">Button</a> <a href="#" class="button--lime">Button</a> <a href="#" class="button--aqua">Button</a> <a href="#" class="button--maroon">Button</a> <a href="#" class="button--white">Button</a> <h2>Sizes</h2> <a href="#" class="button--black button--small">Small</a> <a href="#" class="button--gray button">Default</a> <a href="#" class="button--white button--large">Large</a> <h2>Alignment</h2> <div> <a href="#" class="button--blue button--large button--align-bottom">Bottom</a> <a href="#" class="button--blue button--align-bottom">Bottom</a> <a href="#" class="button--blue button--small button--align-bottom">Bottom</a> </div> <div> <a href="#" class="button--orange button--small button--align-top">Top</a> <a href="#" class="button--orange button--align-top">Top</a> <a href="#" class="button--orange button--large button--align-top">Top</a> </div> <h2><a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a> Icons</h2> <a href="#" class="button--icon button--red"> <i class="fa fa-times"></i> Error </a> <a href="#" class="button--icon button--orange"> <i class="fa fa-warning"></i> Warning </a> <a href="#" class="button--icon button--green"> <i class="fa fa-check"></i> Success! </a> <a href="#" class="button--icon button--blue"> <i class="fa fa-info-circle"></i> Info </a> <h2> <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a> Icons<br> <small>(Without left area)</small> </h2> <a href="#" class="button--red"> <i class="fa fa-times"></i> Error </a> <a href="#" class="button--orange"> <i class="fa fa-warning"></i> Warning </a> <a href="#" class="button--green"> <i class="fa fa-check"></i> Success! </a> <a href="#" class="button--blue"> <i class="fa fa-info-circle"></i> Info </a>
</div>
</body>
</html>

Delicious SASS Buttons - Script Codes CSS Codes

@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
@import url(http://fonts.googleapis.com/css?family=Roboto:700,400,300);
@import url(http://fonts.googleapis.com/css?family=Pacifico);
/* Colors from http://clrs.cc/ */
*, *:before, *:after { box-sizing: border-box;
}
body { font-family: "Roboto", sans-serif; background-color: #dedede; color: #666; height: 100%;
}
.container { width: 700px; margin: 5rem auto; padding: 4rem 2rem; text-align: center; background-color: #fff; border: 1px solid #ccc; border-radius: 0;
}
h1, h2 { font-family: 'Pacifico', sans-serif; font-weight: 400; word-spacing: .25rem;
}
h1 { font-size: 3rem; line-height: 1.2; margin-top: 0;
}
h2 { margin-top: 4rem;
}
small { font-family: "Roboto", sans-serif; font-size: 1rem; font-weight: 200; word-spacing: normal; color: #777;
}
/* Begin button styles */
.button,
[class*='button--'] { position: relative; display: inline-block; vertical-align: middle; margin: 0 16px 20px 0; /* REM fallback */ margin: 0 1rem calc(1rem + 4px) 0; /* Account for extra height from box shadow */ padding: 1em 2em; font-weight: 200; text-decoration: none; color: white; border-radius: 0; transition: all .25s; transform: translate(0, -2px); background-color: #bada55; box-shadow: 0 2px 0 #9eb948;
}
.button:hover, .button:focus,
[class*='button--']:hover,
[class*='button--']:focus { color: white; outline: none; box-shadow: none; transform: translate(0, 0);
}
.button:hover, .button:focus,
[class*='button--']:hover,
[class*='button--']:focus { background-color: #cbe380;
}
.button:active,
[class*='button--']:active { background-color: #bada55;
}
.button--red { background-color: #FF4136; box-shadow: 0 2px 0 #d9372e;
}
.button--red:hover, .button--red:focus { background-color: #ff7168;
}
.button--red:active { background-color: #FF4136;
}
.button--orange { background-color: #FF851B; box-shadow: 0 2px 0 #d97117;
}
.button--orange:hover, .button--orange:focus { background-color: #ffa454;
}
.button--orange:active { background-color: #FF851B;
}
.button--yellow { background-color: #FFDC00; box-shadow: 0 2px 0 #d9bb00;
}
.button--yellow:hover, .button--yellow:focus { background-color: #ffe540;
}
.button--yellow:active { background-color: #FFDC00;
}
.button--lime { background-color: #01FF70; box-shadow: 0 2px 0 #01d95f;
}
.button--lime:hover, .button--lime:focus { background-color: #41ff94;
}
.button--lime:active { background-color: #01FF70;
}
.button--green { background-color: #2ECC40; box-shadow: 0 2px 0 #27ad36;
}
.button--green:hover, .button--green:focus { background-color: #62d970;
}
.button--green:active { background-color: #2ECC40;
}
.button--olive { background-color: #3D9970; box-shadow: 0 2px 0 #34825f;
}
.button--olive:hover, .button--olive:focus { background-color: #6eb394;
}
.button--olive:active { background-color: #3D9970;
}
.button--teal { background-color: #39CCCC; box-shadow: 0 2px 0 #30adad;
}
.button--teal:hover, .button--teal:focus { background-color: #6bd9d9;
}
.button--teal:active { background-color: #39CCCC;
}
.button--aqua { background-color: #7FDBFF; box-shadow: 0 2px 0 #6cbad9;
}
.button--aqua:hover, .button--aqua:focus { background-color: #9fe4ff;
}
.button--aqua:active { background-color: #7FDBFF;
}
.button--blue { background-color: #0074D9; box-shadow: 0 2px 0 #0063b8;
}
.button--blue:hover, .button--blue:focus { background-color: #4097e3;
}
.button--blue:active { background-color: #0074D9;
}
.button--purple { background-color: #B10DC9; box-shadow: 0 2px 0 #960bab;
}
.button--purple:hover, .button--purple:focus { background-color: #c54ad7;
}
.button--purple:active { background-color: #B10DC9;
}
.button--fuchsia { background-color: #F012BE; box-shadow: 0 2px 0 #cc0fa2;
}
.button--fuchsia:hover, .button--fuchsia:focus { background-color: #f44dce;
}
.button--fuchsia:active { background-color: #F012BE;
}
.button--maroon { background-color: #85144B; box-shadow: 0 2px 0 #711140;
}
.button--maroon:hover, .button--maroon:focus { background-color: #a44f78;
}
.button--maroon:active { background-color: #85144B;
}
.button--navy { background-color: #001F3F; box-shadow: 0 2px 0 #001a36;
}
.button--navy:hover, .button--navy:focus { background-color: #40576f;
}
.button--navy:active { background-color: #001F3F;
}
.button--black { background-color: #333; box-shadow: 0 2px 0 #2b2b2b;
}
.button--black:hover, .button--black:focus { background-color: #666666;
}
.button--black:active { background-color: #333;
}
.button--gray { background-color: #888; box-shadow: 0 2px 0 #747474;
}
.button--gray:hover, .button--gray:focus { background-color: #a6a6a6;
}
.button--gray:active { background-color: #888;
}
.button--white { background-color: #eee; box-shadow: 0 2px 0 #cacaca;
}
.button--white:hover, .button--white:focus { background-color: #f2f2f2;
}
.button--white:active { background-color: #eee;
}
/* Make text dark on buttons that have light background-colors */
.button--yellow,
.button--lime,
.button--aqua,
.button--white { color: rgba(0, 0, 0, 0.5);
}
.button--yellow:hover,
.button--lime:hover,
.button--aqua:hover,
.button--white:hover { color: rgba(0, 0, 0, 0.5);
}
/* Sizes */
.button--large { font-size: 32px; font-size: 2rem; padding-top: .5em; padding-bottom: .5em;
}
.button--small { font-size: 13px; font-size: .8rem; padding: .5em 1.5em;
}
/* Alignment */
.button--align-top { vertical-align: top;
}
.button--align-bottom { vertical-align: bottom;
}
/* Icons */
.button--icon { padding-left: 4em; padding-right: 1em;
}
.button--icon > i { position: absolute; top: 50%; left: 1em; margin-top: -.5em;
}
.button--icon:before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3em; border-radius: 0 0 0 0; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.25); transition: all .25s;
}
.button--icon:hover:before { box-shadow: none;
}

Home Page	Home
Developer	Keith Pickering
Username	keithpickering
Uploaded	August 10, 2022
Rating	4.5
Size	8,496 Kb
Views	20,240

Do you need developer help for Delicious SASS 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!

Keith Pickering (keithpickering) Script Codes

Name	Size
Sliding Navigation Menu	3,440 Kb
Reusable Styles	11,486 Kb
Image with inset shadow	2,311 Kb
Text Inputs with Sliding Labels	2,892 Kb
Windows 8 Start Screen	5,520 Kb
Single-element Toggle Switch	3,875 Kb
Material Inspired Menu	4,237 Kb
Easy Container-Breaking Sidebar	4,673 Kb
CSS Business Card	185,152 Kb
Notifications	5,681 Kb

Create amazing love letters 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!

Similar Scripts & Codes

Name	Username	Size
Animated Vertical CSS3 Menu Black	MaCeLMp4	2,750 Kb
AOR site logo	Thatbram	2,527 Kb
Image grid with captions	Mchernin34	2,222 Kb
Android Play Store With Slick Carousel	-J0hn-	4,982 Kb
Scroll effect with text with help from Skrollr	Luxonglassing	2,935 Kb
Day 11 - Calendar Card	Arnellebalane	6,984 Kb
Dice	Fraina	5,026 Kb
Sticky menu on scroll	Senff	2,869 Kb
Octopus Bar iPad App Interactions	Davidkpiano	6,735 Kb
A Pen by Rob Levin	Roblevin	2,787 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!