Seeking assistance to create a button with a 3D effect. I want to mimic the appearance of this button: https://i.sstatic.net/9sFs5.png
Currently using Bootstrap to generate a button using this code:
<button type="button" class="btn btn-primary">Game</button>Anyone knowledgeable in creating 3D effects willing to offer guidance?
In my opinion, this CSS code is the best solution available. (It's worth mentioning that Bootstrap4 is used in the following script)
<style type="text/css">
.my-style {
border-radius: 8px;
width: 120px;
box-shadow: inset 0px 3px 1px 0px rgba(83,154,197,1),
inset 3px 0px 1px 0px rgba(83,154,197,0.4),
inset -0px -3px 1px 0px rgba(0,73,140,0.8),
inset -3px 0px 1px 0px rgba(0,73,140,0.3);
}
.my-style:hover {
box-shadow: inset 0px 3px 1px 0px rgba(83,154,197,0.5),
inset 3px 0px 1px 0px rgba(83,154,197,0.2),
inset 0px -3px 1px 0px rgba(0,73,140,1),
inset -3px 0px 1px 0px rgba(0,73,140,0.5);
}
</style>
<button type="button" class="btn btn-primary my-style">GAME</button>
Another option is to use the image itself as a button: Embed image in a <button> element
I am looking to include the class of the parent DOM node in its child DOM element. For instance, let's consider the following structure: <ol class="test1"> <li> <li> <ol> I want the child ol elemen ...
Is there a way to extract the author's ID on Google's blogger.com platform? I'm familiar with how to obtain the post ID using data:post.id, but what about the author's ID? ...
Having trouble with my register page submit button. Any help is appreciated. Below is the structure of my SQL table: CREATE TABLE `USERS` ( `id` int(20) NOT NULL AUTO_INCREMENT PRIMARY KEY, `username` varchar(50) NOT NULL, `password` varchar(50) N ...
I have a script that should add the class "leftmax" to the li element with id "spect" when the div element with id "tab2" is empty, but it doesn't seem to be working. Can someone provide some assistance? <script type="text/javascript"> $(funct ...
I'm attempting to create a dynamic database search using ajax with a form input field. Currently, I am able to choose a text from the suggested list and trigger the "livesearchSelect" event, which sets the value of the input field. However, the set va ...
Struggling to make this jQuery function properly. I have a form with all fields contained in a div.form-group. The subscribe button is identified by the id subscribe. I'm aiming to hide the form fields when clicked, but my JavaScript doesn't see ...
I am looking for three specific styles of Ubuntu font without having to download them. To access these fonts, I inserted this link in the <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,700" rel="stylesheet"> According to Google& ...
I have integrated the "Places" Google API to enable address autocomplete in an input field on my website. However, since the service is limited to a specific area, I have implemented an autocomplete filter. The issue I'm facing is that users are stil ...
I've been experimenting with creating a visually appealing div that serves as the centerpiece of a website. Imagine it resembling a standard "news" link. The width set at 80%, an image aligned to the left with a border, a headline detailing the lates ...
Can someone help me with changing the font family and size of my paragraphs and headings (p and h1)? Any assistance would be greatly appreciated. Feel free to review my code for any other errors as it has been a while since I last coded. html, body { ma ...
I am currently working on a script to restrict the number of checkboxes that can be checked, but I am encountering an issue where the script is disabling all checkboxes on the page. Is there a way to only disable a specific checkbox within a certain div? ...
As a newcomer to HTML and CSS, I am struggling with setting the background color of my root div on a webpage. My code is quite complex, but let me simplify the issue for you by providing a sample problem below. <style> #background{ background-c ...
I am currently learning Laravel version 8 and encountered an issue while trying to install Tailwind CSS using the npm command. npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 Here is a detai ...
Currently working with ASP.NET 3.5 web forms. I've recently saved the path of my website in the web.config file under the key "CommonPath". I have a basic static HTML page that I would like to utilize this key on. Any suggestions on how to achieve ...
After researching online, I have been looking for a way to simultaneously stream a video.mp4 to multiple html5 clients. Despite reading various tutorials, I haven't found the ideal solution using nodejs. Do you have any suggestions or alternative met ...
I am looking to implement a custom free text filter with just one input field in a table. The standard filter currently applies to all values, but I specifically need it to focus on col1 and col2 from this JSON array: myJsonArray = [{col1: "xxx", col2: "y ...
The Issue: Hello, I have confirmed that my PHP file is functioning properly. However, the AJAX code connected to my JavaScript function seems to be malfunctioning. Even though the function is triggered, nothing happens as expected. The Script: Check o ...
I am experimenting with creating a scrolling animation using mCustomScrollbar Currently, I have managed to obtain the current scrollTop and animate it to a specific height using the code below: $("#content").mCustomScrollbar({ scrollButtons:{ ...
I am facing an issue with an AJAX call that retrieves data from a PHP file. I am attempting to remove existing HTML content and replace it with the data fetched from the PHP file. To clear the content, I am using the following: $('#due-tasks-content& ...
Currently, I am utilizing Bootstrap 4 Collapse and it is functioning flawlessly. However, I am interested in making a slight adjustment. Is there a method to prevent the collapse from pushing down the content below it and instead have it overlap? If this i ...