Realistic Buttons

Developer
Chris Steurer
Size
2,248 Kb
Views
54,648
  1. Realistic Buttons Previews
  2. Realistic Buttons HTML Codes
  3. Realistic Buttons CSS Codes

How do I make an realistic buttons?

Simple, large Call To Action buttons with shadows and borders that react to hovering and being clicked on in a semi realistic fashion.. What is a realistic buttons? How do you make a realistic buttons? This script and codes were developed by Chris Steurer on 08 December 2022, Thursday.

Realistic Buttons Previews
IQ Test

Realistic Buttons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Realistic Buttons</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <button href="" class="linkButton circle">Shop For <span>THIS</span></button>
<button href="" class="linkButton">Shop For <span>THAT</span></button>
<button href="" class="linkButton roundCorners">Shop For <span>THIS TOO</span></button> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Realistic Buttons - Script Codes CSS Codes

/* General Styles (Not Needed) */
body { background:linear-gradient(0deg,#333,#555); padding:10% 0; min-width:350px;
}
section { display:block; clear:both; margin:40px 0;
}
/* ///////////////////////////////////////////// // Button Style \\
///////////////////////////////////////////// */
button.linkButton { background:#efefef; /* Controls the "width" of the button (not really, but kinda) */ padding:18px 80px; border:none; border-bottom: solid 7px #C5C5C5; margin: 40px auto; display: block; box-shadow:0 7px 10px rgba(0,0,0,0.8); /* This is terrible for usability, but it sure looks prettier! */ outline:none;
}
button.linkButton.circle { border-radius:100%; /* Adjust the padding to keep it circular depending on the amount of text you have */ padding:60px 50px;
}
button.linkButton.roundCorners { border-radius:20px;
}
button.linkButton:hover { cursor:pointer; /* Add an extra border at the top that matches the button background color in order to fake the "shrinking" effect */ border-top:solid 2px #efefef; /* Reduce the border at the bottom in order to fake the "skrinking effect" */ border-bottom: solid 5px #D1D1D1; box-shadow:0 5px 10px rgba(0,0,0,0.6); /* Use padding to prevent text from moving with button padding:16px 80px 20px;*/
}
button.linkButton:active { /* Add an extra border at the top that matches the button background color in order to fake the "shrinking" effect */ border-top:solid 7px #efefef;/* Reduce the border at the bottom in order to fake the "skrinking effect" */ border-bottom:none; box-shadow:0 1px 1px rgba(0,0,0,0.4); /* Use padding to prevent text from moving with button padding:11px 80px 25px; */
}
/* Typography */
button.linkButton { text-align:center; color:#666; line-height:1.8em;
}
button.linkButton span { color:#222; display:block; font-size:2.5em; font-weight:700;
}
Realistic Buttons - Script Codes
Realistic Buttons - Script Codes
Home Page Home
Developer Chris Steurer
Username stoypenny
Uploaded December 08, 2022
Rating 3
Size 2,248 Kb
Views 54,648
Do you need developer help for Realistic 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!

Chris Steurer (stoypenny) Script Codes
Name
Delayed Modal Popup
Button With Image Zoom On Hover
Analytics Data
Simple jQuery Text Spoiler Reveal
Arrow Button Hover Effect
Simple Table Search
Remove Empty WooCommerce Filters
Button Hover Effects
Sign Up Form with live validation
Social Icon Buttons
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!