Button

Developer
Tcmulder
Size
4,482 Kb
Views
58,696
  1. Button Previews
  2. Button HTML Codes
  3. Button CSS Codes

How do I make an button?

Yes, I realize it's cheesy.. What is a button? How do you make a button? This script and codes were developed by Tcmulder on 05 August 2022, Friday.

Button Previews
IQ Test

Button - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Button</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! */ html { height: 100%; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIvPjxzdG9wIG9mZnNldD0iMTJlbSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIvPjxzdG9wIG9mZnNldD0iMTJlbSIgc3RvcC1jb2xvcj0iIzllOWU5ZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzExMTExMSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #333333), color-stop(12em, #aaaaaa), color-stop(12em, #9e9e9e), color-stop(100%, #111111)); background-image: -moz-linear-gradient(top, #333333 0%, #aaaaaa 12em, #9e9e9e 12em, #111111 100%); background-image: -webkit-linear-gradient(top, #333333 0%, #aaaaaa 12em, #9e9e9e 12em, #111111 100%); background-image: linear-gradient(to bottom, #333333 0%, #aaaaaa 12em, #9e9e9e 12em, #111111 100%);
}
body { /* text-align: center;*/ text-indent: 35%;
}
button { -webkit-appearance: none; display: inline-block; width: 5em; height: 5em; margin-top: 5%; border: .1em solid #777; border-radius: 50%; transform: rotateX(35deg); color: transparent; box-shadow: 0 .4em 0 #333, 0 .9em .85em #111; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IiIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzg3ODA4MCIvPjxzdG9wIG9mZnNldD0iOTElIiBzdG9wLWNvbG9yPSIjNjA1YzVjIi8+PHN0b3Agb2Zmc2V0PSI5MiUiIHN0b3AtY29sb3I9IiM1NjUzNTMiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZGUxZTEiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; background-image: -moz-radial-gradient(center, ellipse cover, #878080 0%, #605c5c 91%, #565353 92%, #ede1e1 100%); background-image: -webkit-radial-gradient(center, ellipse cover, #878080 0%, #605c5c 91%, #565353 92%, #ede1e1 100%); background-image: radial-gradient(ellipse cover at center, #878080 0%, #605c5c 91%, #565353 92%, #ede1e1 100%);
}
button:after, button:before { content: ""; position: absolute; width: .2em; height: .2em; border-radius: 50%; background: #222; font-size: 5em; text-indent: -.15em; box-shadow: 0 -.03em 0 #aaa inset, -.06em .4em 0 #222, -.06em .43em 0 #aaa;
}
button:after { top: .19em; left: .6em;
}
button:before { top: .15em; right: .55em;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <button>Button</button> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Button - Script Codes CSS Codes

html { height: 100%; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIvPjxzdG9wIG9mZnNldD0iMTJlbSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIvPjxzdG9wIG9mZnNldD0iMTJlbSIgc3RvcC1jb2xvcj0iIzllOWU5ZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzExMTExMSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #333333), color-stop(12em, #aaaaaa), color-stop(12em, #9e9e9e), color-stop(100%, #111111)); background-image: -moz-linear-gradient(top, #333333 0%, #aaaaaa 12em, #9e9e9e 12em, #111111 100%); background-image: -webkit-linear-gradient(top, #333333 0%, #aaaaaa 12em, #9e9e9e 12em, #111111 100%); background-image: linear-gradient(to bottom, #333333 0%, #aaaaaa 12em, #9e9e9e 12em, #111111 100%);
}
body { /* text-align: center;*/ text-indent: 35%;
}
button { -webkit-appearance: none; display: inline-block; width: 5em; height: 5em; margin-top: 5%; border: .1em solid #777; border-radius: 50%; transform: rotateX(35deg); color: transparent; box-shadow: 0 .4em 0 #333, 0 .9em .85em #111; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IiIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzg3ODA4MCIvPjxzdG9wIG9mZnNldD0iOTElIiBzdG9wLWNvbG9yPSIjNjA1YzVjIi8+PHN0b3Agb2Zmc2V0PSI5MiUiIHN0b3AtY29sb3I9IiM1NjUzNTMiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZGUxZTEiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; background-image: -moz-radial-gradient(center, ellipse cover, #878080 0%, #605c5c 91%, #565353 92%, #ede1e1 100%); background-image: -webkit-radial-gradient(center, ellipse cover, #878080 0%, #605c5c 91%, #565353 92%, #ede1e1 100%); background-image: radial-gradient(ellipse cover at center, #878080 0%, #605c5c 91%, #565353 92%, #ede1e1 100%);
}
button:after, button:before { content: ""; position: absolute; width: .2em; height: .2em; border-radius: 50%; background: #222; font-size: 5em; text-indent: -.15em; box-shadow: 0 -.03em 0 #aaa inset, -.06em .4em 0 #222, -.06em .43em 0 #aaa;
}
button:after { top: .19em; left: .6em;
}
button:before { top: .15em; right: .55em;
}
Button - Script Codes
Button - Script Codes
Home Page Home
Developer Tcmulder
Username tcmulder
Uploaded August 05, 2022
Rating 3
Size 4,482 Kb
Views 58,696
Do you need developer help for 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!

Tcmulder (tcmulder) Script Codes
Name
Sticky Stopper jQuery Plugin
Wipe Slider
PrePost Slider jQuery Plugin
Slider with Blur
Flexslider Enhanced
Hover Panes
Self Populating Percentage Graphics
Stickup Sticky Nav jQuery Plugin
Cartoon Bomb
Longboard CTAs
Create amazing web content 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!