Pixel Perfect Buttons Without PSD

Developer
Brock Nunn
Size
3,828 Kb
Views
2,024
  1. Pixel Perfect Buttons Without PSD Previews
  2. Pixel Perfect Buttons Without PSD HTML Codes
  3. Pixel Perfect Buttons Without PSD CSS Codes

How do I make an pixel perfect buttons without psd?

I wanted to take some inspiration from some great social buttons at http://pixelsdaily.com/resources/photoshop/psds/free-social-buttons-psd/. The catch was that I wanted to create them using zero images. . What is a pixel perfect buttons without psd? How do you make a pixel perfect buttons without psd? This script and codes were developed by Brock Nunn on 06 January 2023, Friday.

Pixel Perfect Buttons Without PSD Previews
IQ Test

Pixel Perfect Buttons Without PSD - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pixel Perfect Buttons Without PSD</title> <link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700|Roboto' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrap"> <a class="btn google"><span class="icon"><i class="icon-google-plus"></i></span><span class="btn-text">Sign In With Google+</span></a> <a class="btn twitter"><span class="icon"><i class="icon-twitter"></i></span><span class="btn-text">Sign In With Twitter</span></a> <a class="btn facebook"><span class="icon"><i class="icon-facebook"></i></span><span class="btn-text">Sign In With Facebook</span></a> <a class="btn github"><span class="icon"><i class="icon-github"></i></span><span class="btn-text">Sign In With GitHub</span></a>
</div>
</body>
</html>

Pixel Perfect Buttons Without PSD - Script Codes CSS Codes

body { font-family: 'Droid Serif', serif; background: url('https://subtlepatterns.com/patterns/random_grey_variations.png') repeat;
}
.wrap { width: 75%; margin: 25px auto; text-align: center;
}
.btn { background: #eee; display: inline-block; padding: 1px 15px 1px 15px; margin: 5px; border-radius: 2px; position: relative; line-height: 35px; min-width: 180px;
}
.btn:hover { cursor: default;
}
.btn:active { position: relative; top: 2px;
}
.btn i { font-size: 20px; line-height: 30px; position: relative; top: 3px;
}
.btn span.btn-text { display: inline-block; padding-left: 15px; position: relative; top: 1px;
}
.btn span.icon { display: inline-block; padding-right: 10px; position: relative;
}
.google { background: #d04532; /* Old browsers */ background: -moz-linear-gradient(top, #d04532 0%, #c13828 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d04532), color-stop(100%, #c13828)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #d04532 0%, #c13828 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #d04532 0%, #c13828 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #d04532 0%, #c13828 100%); /* IE10+ */ background: linear-gradient(to bottom, #d04532 0%, #c13828 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d04532', endColorstr='#c13828', GradientType=0); /* IE6-9 */ border: 1px solid #7f291d; box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.45), 0px 1px 3px rgba(0, 0, 0, 0.35); color: #fff; text-shadow: 0px -1px 0px #7f291d;
}
.google span.icon { border-right: 1px solid #a83627; width: 20px;
}
.google span.btn-text { border-left: 1px solid rgba(255, 255, 255, 0.25);
}
.facebook { background: #4365ad; /* Old browsers */ background: -moz-linear-gradient(top, #4365ad 0%, #3b5998 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4365ad), color-stop(100%, #3b5998)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #4365ad 0%, #3b5998 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #4365ad 0%, #3b5998 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #4365ad 0%, #3b5998 100%); /* IE10+ */ background: linear-gradient(to bottom, #4365ad 0%, #3b5998 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4365ad', endColorstr='#3b5998', GradientType=0); /* IE6-9 */ border: 1px solid #1e2e4f; box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.45), 0px 1px 3px rgba(0, 0, 0, 0.35); color: #fff; text-shadow: 0px -1px 0px #1e2e4f;
}
.facebook span.icon { border-right: 1px solid #2d4373; width: 20px;
}
.facebook span.btn-text { border-left: 1px solid rgba(255, 255, 255, 0.25);
}
.twitter { background: #68e2d8; /* Old browsers */ background: -moz-linear-gradient(top, #68e2d8 0%, #57c9c4 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #68e2d8), color-stop(100%, #57c9c4)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #68e2d8 0%, #57c9c4 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #68e2d8 0%, #57c9c4 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #68e2d8 0%, #57c9c4 100%); /* IE10+ */ background: linear-gradient(to bottom, #68e2d8 0%, #57c9c4 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#68e2d8', endColorstr='#57c9c4', GradientType=0); /* IE6-9 */ border: 1px solid #2d8d89; box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.75), 0px 1px 3px rgba(0, 0, 0, 0.35); color: #fff; text-shadow: 0px -1px 0px #2d8d89;
}
.twitter span.icon { border-right: 1px solid #3ab3ae; width: 20px;
}
.twitter span.btn-text { border-left: 1px solid rgba(255, 255, 255, 0.25);
}
.github { background: #b7b7b7; /* Old browsers */ background: -moz-linear-gradient(top, #b7b7b7 0%, #939393 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b7b7b7), color-stop(100%, #939393)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #b7b7b7 0%, #939393 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #b7b7b7 0%, #939393 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #b7b7b7 0%, #939393 100%); /* IE10+ */ background: linear-gradient(to bottom, #b7b7b7 0%, #939393 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b7b7b7', endColorstr='#939393', GradientType=0); /* IE6-9 */ border: 1px solid #919191; box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.85), 0px 1px 3px rgba(0, 0, 0, 0.35); color: #fff; text-shadow: 0px -1px 0px #787878;
}
.github span.icon { border-right: 1px solid #848484; width: 20px;
}
.github span.btn-text { border-left: 1px solid rgba(255, 255, 255, 0.35);
}
Pixel Perfect Buttons Without PSD - Script Codes
Pixel Perfect Buttons Without PSD - Script Codes
Home Page Home
Developer Brock Nunn
Username banunn
Uploaded January 06, 2023
Rating 3
Size 3,828 Kb
Views 2,024
Do you need developer help for Pixel Perfect Buttons Without PSD?

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
Article Cards
Simple Login Form Template
Simple Article Layout
Learning Flexbox
Flat UI Alert
Font Awesome Icon Fonts CDN
Off Canvas Navigation
Minimal Hover Menu
Simple jQuery .fadeToggle demo
Super Simple Slideshow
Create amazing video scripts 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!