Dribble Button CSS Rebound

Developer

Size

7,557 Kb

Views

54,648

Dribble Button CSS Rebound Previews
Dribble Button CSS Rebound HTML Codes
Dribble Button CSS Rebound CSS Codes
Dribble Button CSS Rebound JS Codes

How do I make an dribble button css rebound?

In an attempt to sharpen my pseudo element abuse I tried to recreate this: http://dribbble.com/shots/711443-Light-Dark?list=likes. What is a dribble button css rebound? How do you make a dribble button css rebound? This script and codes were developed by James Nowland on 31 October 2022, Monday.

Dribble Button CSS Rebound Previews

Dribble Button CSS Rebound - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dribble Button CSS Rebound</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container">	<h3>CSS Pseudo Element Abuse - Glow Buttons</h3>	<ul class="Nav MainNav">	<li class="MainNav-Button MainNav-Button_LeftOfActive"><a href="#">1</a></li>	<li class="MainNav-Button MainNav-Button_Active"><a href="#">2</a></li>	<li class="MainNav-Button MainNav-Button_RightOfActive"><a href="#">3</a></li>	</ul>	<hr>	<h3><a href="http://dribbble.com/shots/711443-Light-Dark?list=likes" class="TextLink" target="_blank">Original Static Dribbble Shot</a></h3>	<div style="background:url('https://dribbble.s3.amazonaws.com/users/121011/screenshots/711443/attachments/66290/Light_Dark-bigger.png') no-repeat -678px -180px; width:446px; height:86px; margin:0 auto;"></div>	<hr>	<!--small-->	<h3>Build with EMs can be scaled down</h3>	<ul class="Nav Nav_Small MainNav">	<li class="MainNav-Button MainNav-Button_LeftOfActive"><a href="#">1</a></li>	<li class="MainNav-Button MainNav-Button_Active"><a href="#">2</a></li>	<li class="MainNav-Button MainNav-Button_RightOfActive"><a href="#">3</a></li>	<li class="MainNav-Button"><a href="#">4</a></li>	<li class="MainNav-Button"><a href="#">5</a></li>	</ul>	<hr>	<h3>or enlarged</h3>	<ul class="Nav Nav_Large MainNav">	<li class="MainNav-Button MainNav-Button_LeftOfActive"><a href="#">1</a></li>	<li class="MainNav-Button MainNav-Button_Active"><a href="#">2</a></li>	<li class="MainNav-Button MainNav-Button_RightOfActive"><a href="#">3</a></li>	</ul>	<p>Original dribbble shot by: <a href="http://dribbble.com/justd" class="TextLink">JustD</a> - Permission was sought before attempting this CSS challenge.</p>
<a href="https://twitter.com/jnowland" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @jnowland</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Dribble Button CSS Rebound - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Fresca);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline;
}
html { line-height: 1;
}
ol, ul { list-style: none;
}
table { border-collapse: collapse; border-spacing: 0;
}
caption, th, td { text-align: left; font-weight: normal; vertical-align: middle;
}
q, blockquote { quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none;
}
a img { border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block;
}
.Nav:after { content: ""; display: table; clear: both;
}
.MainNav:before, .MainNav:after, .MainNav-Button:after, .MainNav-Button_Active:before, .MainNav-Button_Active:after, .MainNav-Button_LeftOfActive:before, .MainNav-Button_RightOfActive:before { content: ''; display: block; position: absolute;
}
.container { text-align: center; padding: 3.75em 0;
}
.Nav { list-style: none; margin-left: 0;
}
.Nav_Small { font-size: 0.65em;
}
.Nav_Large { font-size: 1.4em;
}
.MainNav { -moz-border-radius: 0.4375em; -webkit-border-radius: 0.4375em; border-radius: 0.4375em; -moz-box-shadow: #4d4d4d 0 -1px 0px 0px inset, rgba(255, 255, 255, 0.0857) 0 -5px 0px 0px inset, #1e1e1e 0 4px 0px 0px inset; -webkit-box-shadow: #4d4d4d 0 -1px 0px 0px inset, rgba(255, 255, 255, 0.0857) 0 -5px 0px 0px inset, #1e1e1e 0 4px 0px 0px inset; box-shadow: #4d4d4d 0 -1px 0px 0px inset, rgba(255, 255, 255, 0.0857) 0 -5px 0px 0px inset, #1e1e1e 0 4px 0px 0px inset; background: #242424; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); display: inline-block; text-align: center; padding: 0.375em 0.3125em; position: relative;
}
.MainNav:before { -moz-border-radius-bottomleft: 0.4375em; -webkit-border-bottom-left-radius: 0.4375em; border-bottom-left-radius: 0.4375em; background: rgba(36, 36, 36, 0.4); width: 0.4375em; height: 0.4375em; bottom: 0; left: 0;
}
.MainNav:after { -moz-border-radius-bottomright: 0.4375em; -webkit-border-bottom-right-radius: 0.4375em; border-bottom-right-radius: 0.4375em; background: rgba(36, 36, 36, 0.4); width: 0.4375em; height: 0.4375em; bottom: 0; right: 0;
}
.MainNav-Button { -moz-border-radius: 0.3125em; -webkit-border-radius: 0.3125em; border-radius: 0.3125em; -moz-box-shadow: rgba(255, 255, 255, 0.15) 0 1px 0px 0px inset, rgba(255, 255, 255, 0.05) 0 1px 0px 1px inset, rgba(0, 0, 0, 0.7) 0 1px 2px 0px, rgba(9, 9, 9, 0.6) 0 2px 3px 2px; -webkit-box-shadow: rgba(255, 255, 255, 0.15) 0 1px 0px 0px inset, rgba(255, 255, 255, 0.05) 0 1px 0px 1px inset, rgba(0, 0, 0, 0.7) 0 1px 2px 0px, rgba(9, 9, 9, 0.6) 0 2px 3px 2px; box-shadow: rgba(255, 255, 255, 0.15) 0 1px 0px 0px inset, rgba(255, 255, 255, 0.05) 0 1px 0px 1px inset, rgba(0, 0, 0, 0.7) 0 1px 2px 0px, rgba(9, 9, 9, 0.6) 0 2px 3px 2px; background-color: #343434; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRlNGU0ZSIgc3RvcC1vcGFjaXR5PSIwLjE1Ii8+PHN0b3Agb2Zmc2V0PSIyJSIgc3RvcC1jb2xvcj0iIzQxNDE0MSIgc3RvcC1vcGFjaXR5PSIwLjE1Ii8+PHN0b3Agb2Zmc2V0PSI1JSIgc3RvcC1jb2xvcj0iIzNiM2IzYiIgc3RvcC1vcGFjaXR5PSIwLjE1Ii8+PHN0b3Agb2Zmc2V0PSIzMiUiIHN0b3AtY29sb3I9IiMzODM4MzgiIHN0b3Atb3BhY2l0eT0iMC4xNSIvPjxzdG9wIG9mZnNldD0iMzMlIiBzdG9wLWNvbG9yPSIjMzYzNjM2IiBzdG9wLW9wYWNpdHk9IjAuMTUiLz48c3RvcCBvZmZzZXQ9IjQ2JSIgc3RvcC1jb2xvcj0iIzM1MzUzNSIgc3RvcC1vcGFjaXR5PSIwLjE1Ii8+PHN0b3Agb2Zmc2V0PSI0NyUiIHN0b3AtY29sb3I9IiMzMzMzMzMiIHN0b3Atb3BhY2l0eT0iMC4xNSIvPjxzdG9wIG9mZnNldD0iNjAlIiBzdG9wLWNvbG9yPSIjMzIzMjMyIiBzdG9wLW9wYWNpdHk9IjAuMTUiLz48c3RvcCBvZmZzZXQ9IjYxJSIgc3RvcC1jb2xvcj0iIzMwMzAzMCIgc3RvcC1vcGFjaXR5PSIwLjE1Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMmEyYTJhIiBzdG9wLW9wYWNpdHk9IjAuMTUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(78, 78, 78, 0.15)), color-stop(2%, rgba(65, 65, 65, 0.15)), color-stop(5%, rgba(59, 59, 59, 0.15)), color-stop(32%, rgba(56, 56, 56, 0.15)), color-stop(33%, rgba(54, 54, 54, 0.15)), color-stop(46%, rgba(53, 53, 53, 0.15)), color-stop(47%, rgba(51, 51, 51, 0.15)), color-stop(60%, rgba(50, 50, 50, 0.15)), color-stop(61%, rgba(48, 48, 48, 0.15)), color-stop(100%, rgba(42, 42, 42, 0.15))); background-image: -moz-linear-gradient(top, rgba(78, 78, 78, 0.15) 0%, rgba(65, 65, 65, 0.15) 2%, rgba(59, 59, 59, 0.15) 5%, rgba(56, 56, 56, 0.15) 32%, rgba(54, 54, 54, 0.15) 33%, rgba(53, 53, 53, 0.15) 46%, rgba(51, 51, 51, 0.15) 47%, rgba(50, 50, 50, 0.15) 60%, rgba(48, 48, 48, 0.15) 61%, rgba(42, 42, 42, 0.15) 100%); background-image: -webkit-linear-gradient(top, rgba(78, 78, 78, 0.15) 0%, rgba(65, 65, 65, 0.15) 2%, rgba(59, 59, 59, 0.15) 5%, rgba(56, 56, 56, 0.15) 32%, rgba(54, 54, 54, 0.15) 33%, rgba(53, 53, 53, 0.15) 46%, rgba(51, 51, 51, 0.15) 47%, rgba(50, 50, 50, 0.15) 60%, rgba(48, 48, 48, 0.15) 61%, rgba(42, 42, 42, 0.15) 100%); background-image: linear-gradient(to bottom, rgba(78, 78, 78, 0.15) 0%, rgba(65, 65, 65, 0.15) 2%, rgba(59, 59, 59, 0.15) 5%, rgba(56, 56, 56, 0.15) 32%, rgba(54, 54, 54, 0.15) 33%, rgba(53, 53, 53, 0.15) 46%, rgba(51, 51, 51, 0.15) 47%, rgba(50, 50, 50, 0.15) 60%, rgba(48, 48, 48, 0.15) 61%, rgba(42, 42, 42, 0.15) 100%); background-size: 4px 4px; float: left; margin-right: 0.125em; padding: 0.375em 0.4375em; position: relative;
}
.MainNav-Button a { -moz-border-radius: 0.45833em; -webkit-border-radius: 0.45833em; border-radius: 0.45833em; text-shadow: #000 0 -1px 0; background: rgba(182, 182, 182, 0.018); color: rgba(255, 255, 255, 0.85); display: block; font-family: 'Fresca', sans-serif; font-size: 1.5em; padding: 0.5em 2.5em 0.5em; text-decoration: none;
}
.MainNav-Button:hover { -moz-box-shadow: rgba(255, 255, 255, 0.05) 0 1px 0px 0px inset, rgba(255, 255, 255, 0.02) 0 1px 0px 1px inset, rgba(9, 9, 9, 0.5) 0 2px 2px 1px; -webkit-box-shadow: rgba(255, 255, 255, 0.05) 0 1px 0px 0px inset, rgba(255, 255, 255, 0.02) 0 1px 0px 1px inset, rgba(9, 9, 9, 0.5) 0 2px 2px 1px; box-shadow: rgba(255, 255, 255, 0.05) 0 1px 0px 0px inset, rgba(255, 255, 255, 0.02) 0 1px 0px 1px inset, rgba(9, 9, 9, 0.5) 0 2px 2px 1px;
}
.MainNav-Button:hover a { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8;
}
.MainNav-Button:after { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjUiLz48c3RvcCBvZmZzZXQ9IjY5JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjExIi8+PHN0b3Agb2Zmc2V0PSI4MCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(20%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.5)), color-stop(69%, rgba(255, 255, 255, 0.11)), color-stop(80%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0))); background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.11) 69%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%); background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.11) 69%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%); background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.11) 69%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%); width: 100%; height: 1px; left: 0; top: 0;
}
.MainNav-Button_Active { -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1px inset; -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1px inset; box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1px inset; background-color: #2d2d2d; background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, #2e2e2e 50%); background-size: 2px 2px;
}
.MainNav-Button_Active a { text-shadow: rgba(255, 255, 255, 0.4) 0 0 35px, rgba(76, 190, 255, 0.95) 0 0 25px; background: none; color: #4cbeff;
}
.MainNav-Button_Active:before { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IiIgcj0iNTclIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMjk4OWQ4IiBzdG9wLW9wYWNpdHk9IjAuNTEiLz48c3RvcCBvZmZzZXQ9IjUzJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIwLjAxIi8+PHN0b3Agb2Zmc2V0PSI1NCUiIHN0b3AtY29sb3I9IiMxZTU3OTkiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSI1NyUiIHN0b3AtY29sb3I9IiMxZTU3OTkiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -moz-radial-gradient(center, ellipse cover, rgba(41, 137, 216, 0.51) 0%, rgba(30, 87, 153, 0.01) 53%, rgba(30, 87, 153, 0) 54%, rgba(30, 87, 153, 0) 57%); background-image: -webkit-radial-gradient(center, ellipse cover, rgba(41, 137, 216, 0.51) 0%, rgba(30, 87, 153, 0.01) 53%, rgba(30, 87, 153, 0) 54%, rgba(30, 87, 153, 0) 57%); background-image: radial-gradient(ellipse cover at center, rgba(41, 137, 216, 0.51) 0%, rgba(30, 87, 153, 0.01) 53%, rgba(30, 87, 153, 0) 54%, rgba(30, 87, 153, 0) 57%); -moz-box-shadow: rgba(76, 190, 255, 0.02) 0 0 0px 3px inset; -webkit-box-shadow: rgba(76, 190, 255, 0.02) 0 0 0px 3px inset; box-shadow: rgba(76, 190, 255, 0.02) 0 0 0px 3px inset; top: -0.25em; left: 10%; width: 80%; height: 0.375em;
}
.MainNav-Button_Active:after { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IiIgcj0iNTclIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMjk4OWQ4IiBzdG9wLW9wYWNpdHk9IjAuNTEiLz48c3RvcCBvZmZzZXQ9IjUzJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIwLjAxIi8+PHN0b3Agb2Zmc2V0PSI1NCUiIHN0b3AtY29sb3I9IiMxZTU3OTkiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSI1NyUiIHN0b3AtY29sb3I9IiMxZTU3OTkiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -moz-radial-gradient(center, ellipse cover, rgba(41, 137, 216, 0.51) 0%, rgba(30, 87, 153, 0.01) 53%, rgba(30, 87, 153, 0) 54%, rgba(30, 87, 153, 0) 57%); background-image: -webkit-radial-gradient(center, ellipse cover, rgba(41, 137, 216, 0.51) 0%, rgba(30, 87, 153, 0.01) 53%, rgba(30, 87, 153, 0) 54%, rgba(30, 87, 153, 0) 57%); background-image: radial-gradient(ellipse cover at center, rgba(41, 137, 216, 0.51) 0%, rgba(30, 87, 153, 0.01) 53%, rgba(30, 87, 153, 0) 54%, rgba(30, 87, 153, 0) 57%); -moz-box-shadow: rgba(255, 255, 255, 0.05) 0 -5px 0px 0px inset; -webkit-box-shadow: rgba(255, 255, 255, 0.05) 0 -5px 0px 0px inset; box-shadow: rgba(255, 255, 255, 0.05) 0 -5px 0px 0px inset; top: inherit; bottom: -0.5em; left: 0; width: 100%; height: 0.5em;
}
.MainNav-Button_Active:hover { -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1px inset; -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1px inset; box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1px inset;
}
.MainNav-Button_LeftOfActive:before { -moz-box-shadow: rgba(80, 136, 137, 0.5) -1px 0px 0px 0px; -webkit-box-shadow: rgba(80, 136, 137, 0.5) -1px 0px 0px 0px; box-shadow: rgba(80, 136, 137, 0.5) -1px 0px 0px 0px; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRjYmVmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzRjYmVmZiIgc3RvcC1vcGFjaXR5PSIwLjciLz48c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzRjYmVmZiIgc3RvcC1vcGFjaXR5PSIwLjY5Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNGNiZWZmIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(76, 190, 255, 0)), color-stop(50%, rgba(76, 190, 255, 0.7)), color-stop(51%, rgba(76, 190, 255, 0.69)), color-stop(100%, rgba(76, 190, 255, 0))); background-image: -moz-linear-gradient(top, rgba(76, 190, 255, 0) 0%, rgba(76, 190, 255, 0.7) 50%, rgba(76, 190, 255, 0.69) 51%, rgba(76, 190, 255, 0) 100%); background-image: -webkit-linear-gradient(top, rgba(76, 190, 255, 0) 0%, rgba(76, 190, 255, 0.7) 50%, rgba(76, 190, 255, 0.69) 51%, rgba(76, 190, 255, 0) 100%); background-image: linear-gradient(to bottom, rgba(76, 190, 255, 0) 0%, rgba(76, 190, 255, 0.7) 50%, rgba(76, 190, 255, 0.69) 51%, rgba(76, 190, 255, 0) 100%); width: 1px; height: 90%; right: 0; top: 5%;
}
.MainNav-Button_RightOfActive:before { -moz-box-shadow: rgba(80, 136, 137, 0.5) 1px 0px 0px 0px; -webkit-box-shadow: rgba(80, 136, 137, 0.5) 1px 0px 0px 0px; box-shadow: rgba(80, 136, 137, 0.5) 1px 0px 0px 0px; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRjYmVmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzRjYmVmZiIgc3RvcC1vcGFjaXR5PSIwLjciLz48c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzRjYmVmZiIgc3RvcC1vcGFjaXR5PSIwLjY5Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNGNiZWZmIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(76, 190, 255, 0)), color-stop(50%, rgba(76, 190, 255, 0.7)), color-stop(51%, rgba(76, 190, 255, 0.69)), color-stop(100%, rgba(76, 190, 255, 0))); background-image: -moz-linear-gradient(top, rgba(76, 190, 255, 0) 0%, rgba(76, 190, 255, 0.7) 50%, rgba(76, 190, 255, 0.69) 51%, rgba(76, 190, 255, 0) 100%); background-image: -webkit-linear-gradient(top, rgba(76, 190, 255, 0) 0%, rgba(76, 190, 255, 0.7) 50%, rgba(76, 190, 255, 0.69) 51%, rgba(76, 190, 255, 0) 100%); background-image: linear-gradient(to bottom, rgba(76, 190, 255, 0) 0%, rgba(76, 190, 255, 0.7) 50%, rgba(76, 190, 255, 0.69) 51%, rgba(76, 190, 255, 0) 100%); width: 1px; height: 90%; left: 0; top: 5%;
}
body { background: #2a2a2a url('/images/background-pattern.gif'); font-family: sans-serif;
}
h3 { text-shadow: black -1px -2px 0px; text-shadow: black -1px -2px 0px 0px; font-size: 0.75em; color: #a6a6a6; text-transform: uppercase; margin-bottom: 1em; font-weight: normal; letter-spacing: 2px;
}
.TextLink { text-decoration: none; color: #a6a6a6; font-weight: bold;
}
.TextLink:hover { text-decoration: underline;
}
hr { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=10); opacity: 0.1; height: 0px; border-top: black 1px solid; margin: 2em auto; width: 60%;
}
p { color: #a6a6a6; font-size: 0.8125em; line-height: 1.38462em; margin-top: 2em; margin-bottom: 2em;
}

Dribble Button CSS Rebound - Script Codes JS Codes

//JS to make it work on single page/codepen
var MainNav = $('.MainNav-Button');
MainNav.on('mousedown', function(){	var $this = $(this);	$this.parent().find('.MainNav-Button').removeClass('MainNav-Button_LeftOfActive MainNav-Button_RightOfActive MainNav-Button_Active');	$this.addClass('MainNav-Button_Active').prev().addClass('MainNav-Button_LeftOfActive');	$this.next().addClass('MainNav-Button_RightOfActive');
});
MainNav.on('click', function(event){	event.preventDefault();
});

Home Page	Home
Developer	James Nowland
Username	jnowland
Uploaded	October 31, 2022
Rating	4.5
Size	7,557 Kb
Views	54,648

Do you need developer help for Dribble Button CSS Rebound?

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!

James Nowland (jnowland) Script Codes

Name	Size
Outer Gradient Circle Progress	17,247 Kb
CSS Ribbon with inner border.	166,994 Kb
Lorem pixel Images	2,290 Kb
Hamburger and Search CSS Animations	4,173 Kb
A Pen by James Nowland	6,998 Kb
Three Heading Solutions	11,415 Kb
SVG Modified with Query String	1,663 Kb
Pure CSS Spinner	3,909 Kb
Smart Ratio CSS Photo Grid	3,200 Kb
CSS3 Stroke and Gradient Text	2,577 Kb

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!

Similar Scripts & Codes

Name	Username	Size
Flower expansion	Sreucherand	3,425 Kb
SVG hamburger menu button	Elifitch	2,602 Kb
Sticky footer testing	75th	1,649 Kb
Banner Ad	Raquellorenzana	4,172 Kb
Simple personal profile	Miroot	2,856 Kb
JQuery exercise	Brian-baum	3,780 Kb
Shop Talk logo made in CSS	Hugo	19,368 Kb
SCSS Social Icons Flat	Mattsince87	3,482 Kb
A Pen by Mike Otis	Mikeotis	3,185 Kb
Barber Shop	Bhlaird	6,270 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!