Pressable CSS Buttons

Size
4,863 Kb
Views
26,312

How do I make an pressable css buttons?

What is a pressable css buttons? How do you make a pressable css buttons? This script and codes were developed by Alexander Nastase on 21 August 2022, Sunday.

Pressable CSS Buttons Previews

Pressable CSS Buttons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pressable CSS Buttons</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.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! */ </style> <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'>
<style>
html { text-align: center;
}
body { background-color: #fff0f5; background-image: -webkit-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)); background-image: -moz-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)); background-image: -ms-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)); background-image: -o-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)); background-image: linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)); display: inline-block; font-size: 100%; margin: 0 auto; padding: 3em 6em; text-align: left;
}
h1 { background-color: #7f5261; background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1)); background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1)); background-image: -ms-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1)); background-image: -o-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1)); background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1)); border-radius: 0 .25em 0 0; color: #fff0f5; font-family: 'open sans', sans-serif; font-size: 3em; font-weight: bold; line-height: 1; margin-left: -999em; margin-bottom: -2px; padding: 1em 1em 1em 1000em; text-align: center; text-shadow: 0 .1em 0 hsla(0,0%,0%,.1);
}
p { color: #7f5261; display: inline-block; font-family: 'open sans', sans-serif; font-size: 1em; font-weight: bold; line-height: 1; margin: -1em 1em 0 0; width: 6em; vertical-align: middle;
}
hr { border: 1px solid #7f5261; margin: 0 0 1em 0;
}
div { background-color: #7f5261; border-radius: 0 0 .75em 0; color: #fff0f5; font-family: 'open sans', sans-serif; font-size: 1em; font-weight: bold; line-height: 1; margin-left: -999em; padding: 2em 1em 2em 1007em; text-align: center;
}
label:after { color: #bbb; content: ' #';
}
input { background: #fff0f5; border: 1px solid #6e4150; color: #333; margin-right: 5.5em; padding: .5em;
}
.attribution { color: #888; margin-top: 3em; text-align: right; width: 100%;
}
.attribution a { color: #888;
}
.attribution a:hover,
.attribution a:focus { color: #7f5261;
}
/* Button - these styles are the good stuff */
.button { background-color: #999; background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1)); background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1)); background-image: -ms-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1)); background-image: -o-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1)); background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1)); border: none; border-radius: .5em; box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25), inset 0 2px 0 hsla(0,0%,100%,.1), inset 0 1.2em 0 hsla(0,0%,100%,.1), inset 0 -.2em 0 hsla(0,0%,100%,.1), inset 0 -.25em 0 hsla(0,0%,0%,.5), 0 .25em .25em hsla(0,0%,0%,.1); color: #444; cursor: pointer; display: inline-block; font-family: sans-serif; font-size: 1em; font-weight: bold; line-height: 1.5; margin: 0 .5em 1em; padding: .5em 1.5em .75em; position: relative; text-decoration: none; text-shadow: 0 1px 1px hsla(0,0%,100%,.25); vertical-align: middle;
}
.button:hover { outline: none;
}
.button:hover,
.button:focus { box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25), inset 0 2px 0 hsla(0,0%,100%,.1), inset 0 1.2em 0 hsla(0,0%,100%,.1), inset 0 -.2em 0 hsla(0,0%,100%,.1), inset 0 -.25em 0 hsla(0,0%,0%,.5), inset 0 0 0 3em hsla(0,0%,100%,.2), 0 .25em .25em hsla(0,0%,0%,.1);
}
.button:active { box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25), inset 0 2px 0 hsla(0,0%,100%,.1), inset 0 1.2em 0 hsla(0,0%,100%,.1), inset 0 0 0 3em hsla(0,0%,100%,.2), inset 0 .25em .5em hsla(0,0%,0%,.05), 0 -1px 1px hsla(0,0%,0%,.1), 0 1px 1px hsla(0,0%,100%,.25); margin-top: .25em; outline: none; padding-bottom: .5em;
}
/* Light Text */
.lightText { box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25), inset 0 2px 0 hsla(0,0%,100%,.1), inset 0 1.2em 0 hsla(0,0%,100%,.05), inset 0 -.2em 0 hsla(0,0%,100%,.1), inset 0 -.25em 0 hsla(0,0%,0%,.5), 0 .25em .25em hsla(0,0%,0%,.1); color: #fff; text-shadow: 0 -1px 1px hsla(0,0%,0%,.25);
}
.lightText:hover,
.lightText:focus { box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25), inset 0 2px 0 hsla(0,0%,100%,.1), inset 0 1.2em 0 hsla(0,0%,100%,.05), inset 0 -.2em 0 hsla(0,0%,100%,.1), inset 0 -.25em 0 hsla(0,0%,0%,.5), inset 0 0 0 3em hsla(0,0%,100%,.2), 0 .25em .25em hsla(0,0%,0%,.1);
}
.lightText:active { box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25), inset 0 2px 0 hsla(0,0%,100%,.1), inset 0 1.2em 0 hsla(0,0%,100%,.05), inset 0 0 0 3em hsla(0,0%,100%,.2), inset 0 .25em .5em hsla(0,0%,0%,.05), 0 -1px 1px hsla(0,0%,0%,.1), 0 1px 1px hsla(0,0%,100%,.25);
}
/* Large */
.large { font-size: 1.25em;
}
/* Medium */
.medium { font-size: 1em;
}
/* Small */
.small { font-size: .75em;
}
/* Regular */
.regular { border-radius: .5em;
}
/* Square */
.square { border-radius: .25em;
}
/* Round */
.round { border-radius: 1.25em;
}
/* Red */
.red { background-color: #ff6c6f;
}
/* Orange */
.orange { background-color: #f6cf6f;
}
/* Yellow */
.yellow { background-color: #fff6c6;
}
/* Green */
.green { background-color: #6fcf6f;
}
/* Blue */
.blue { background-color: #6fc6ff;
}
/* Purple */
.purple { background-color: #f6c6ff;
}
/* White */
.white { background-color: #eee;
}
/* Grey */
.grey { background-color: #999;
}
/* Black */
.black { background-color: #444;
}
/* Custom */
.custom { background-color: #fff0f5; /* Set the button color here */ color: #444; /* Remove this for a dark background */
}
​ </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1>Pressable CSS Buttons</h1>
<hr>
<p>Red</p>
<a class="button large regular red" href="javascript:void(0);">Button</a>
<a class="button medium regular red" href="javascript:void(0);">Button</a>
<a class="button small regular red" href="javascript:void(0);">Button</a>
<a class="button large square red" href="javascript:void(0);">Button</a>
<a class="button medium square red" href="javascript:void(0);">Button</a>
<a class="button small square red" href="javascript:void(0);">Button</a>
<a class="button large round red" href="javascript:void(0);">Button</a>
<a class="button medium round red" href="javascript:void(0);">Button</a>
<a class="button small round red" href="javascript:void(0);">Button</a>
<hr>
<p>Orange</p>
<a class="button large regular orange" href="javascript:void(0);">Button</a>
<a class="button medium regular orange" href="javascript:void(0);">Button</a>
<a class="button small regular orange" href="javascript:void(0);">Button</a>
<a class="button large square orange" href="javascript:void(0);">Button</a>
<a class="button medium square orange" href="javascript:void(0);">Button</a>
<a class="button small square orange" href="javascript:void(0);">Button</a>
<a class="button large round orange" href="javascript:void(0);">Button</a>
<a class="button medium round orange" href="javascript:void(0);">Button</a>
<a class="button small round orange" href="javascript:void(0);">Button</a>
<hr>
<p>Yellow</p>
<a class="button large regular yellow" href="javascript:void(0);">Button</a>
<a class="button medium regular yellow" href="javascript:void(0);">Button</a>
<a class="button small regular yellow" href="javascript:void(0);">Button</a>
<a class="button large square yellow" href="javascript:void(0);">Button</a>
<a class="button medium square yellow" href="javascript:void(0);">Button</a>
<a class="button small square yellow" href="javascript:void(0);">Button</a>
<a class="button large round yellow" href="javascript:void(0);">Button</a>
<a class="button medium round yellow" href="javascript:void(0);">Button</a>
<a class="button small round yellow" href="javascript:void(0);">Button</a>
<hr>
<p>Green</p>
<a class="button large regular green" href="javascript:void(0);">Button</a>
<a class="button medium regular green" href="javascript:void(0);">Button</a>
<a class="button small regular green" href="javascript:void(0);">Button</a>
<a class="button large square green" href="javascript:void(0);">Button</a>
<a class="button medium square green" href="javascript:void(0);">Button</a>
<a class="button small square green" href="javascript:void(0);">Button</a>
<a class="button large round green" href="javascript:void(0);">Button</a>
<a class="button medium round green" href="javascript:void(0);">Button</a>
<a class="button small round green" href="javascript:void(0);">Button</a>
<hr>
<p>Blue</p>
<a class="button large regular blue" href="javascript:void(0);">Button</a>
<a class="button medium regular blue" href="javascript:void(0);">Button</a>
<a class="button small regular blue" href="javascript:void(0);">Button</a>
<a class="button large square blue" href="javascript:void(0);">Button</a>
<a class="button medium square blue" href="javascript:void(0);">Button</a>
<a class="button small square blue" href="javascript:void(0);">Button</a>
<a class="button large round blue" href="javascript:void(0);">Button</a>
<a class="button medium round blue" href="javascript:void(0);">Button</a>
<a class="button small round blue" href="javascript:void(0);">Button</a>
<hr>
<p>Purple</p>
<a class="button large regular purple" href="javascript:void(0);">Button</a>
<a class="button medium regular purple" href="javascript:void(0);">Button</a>
<a class="button small regular purple" href="javascript:void(0);">Button</a>
<a class="button large square purple" href="javascript:void(0);">Button</a>
<a class="button medium square purple" href="javascript:void(0);">Button</a>
<a class="button small square purple" href="javascript:void(0);">Button</a>
<a class="button large round purple" href="javascript:void(0);">Button</a>
<a class="button medium round purple" href="javascript:void(0);">Button</a>
<a class="button small round purple" href="javascript:void(0);">Button</a>
<hr>
<p>White</p>
<a class="button large regular white" href="javascript:void(0);">Button</a>
<a class="button medium regular white" href="javascript:void(0);">Button</a>
<a class="button small regular white" href="javascript:void(0);">Button</a>
<a class="button large square white" href="javascript:void(0);">Button</a>
<a class="button medium square white" href="javascript:void(0);">Button</a>
<a class="button small square white" href="javascript:void(0);">Button</a>
<a class="button large round white" href="javascript:void(0);">Button</a>
<a class="button medium round white" href="javascript:void(0);">Button</a>
<a class="button small round white" href="javascript:void(0);">Button</a>
<hr>
<p>Grey</p>
<a class="button lightText large regular grey" href="javascript:void(0);">Button</a>
<a class="button lightText medium regular grey" href="javascript:void(0);">Button</a>
<a class="button lightText small regular grey" href="javascript:void(0);">Button</a>
<a class="button lightText large square grey" href="javascript:void(0);">Button</a>
<a class="button lightText medium square grey" href="javascript:void(0);">Button</a>
<a class="button lightText small square grey" href="javascript:void(0);">Button</a>
<a class="button lightText large round grey" href="javascript:void(0);">Button</a>
<a class="button lightText medium round grey" href="javascript:void(0);">Button</a>
<a class="button lightText small round grey" href="javascript:void(0);">Button</a>
<hr>
<p>Black</p>
<a class="button lightText large regular black" href="javascript:void(0);">Button</a>
<a class="button lightText medium regular black" href="javascript:void(0);">Button</a>
<a class="button lightText small regular black" href="javascript:void(0);">Button</a>
<a class="button lightText large square black" href="javascript:void(0);">Button</a>
<a class="button lightText medium square black" href="javascript:void(0);">Button</a>
<a class="button lightText small square black" href="javascript:void(0);">Button</a>
<a class="button lightText large round black" href="javascript:void(0);">Button</a>
<a class="button lightText medium round black" href="javascript:void(0);">Button</a>
<a class="button lightText small round black" href="javascript:void(0);">Button</a>
<hr>
<p>Custom</p>
<a class="button large regular custom" href="javascript:void(0);">Button</a>
<a class="button medium regular custom" href="javascript:void(0);">Button</a>
<a class="button small regular custom" href="javascript:void(0);">Button</a>
<a class="button large square custom" href="javascript:void(0);">Button</a>
<a class="button medium square custom" href="javascript:void(0);">Button</a>
<a class="button small square custom" href="javascript:void(0);">Button</a>
<a class="button large round custom" href="javascript:void(0);">Button</a>
<a class="button medium round custom" href="javascript:void(0);">Button</a>
<a class="button small round custom" href="javascript:void(0);">Button</a>
<div> <label>Custom Background Colour:</label> <input id="background" type="text" value="fff0f5"> <label>Custom Font Colour:</label> <input id="color" type="text" value="444">
</div>
<p class="attribution">Made by <a href="http://joshnh.com">Joshua Hibbert</a></p>​ <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pressable CSS Buttons - Script Codes CSS Codes