Is it achievable to design a button that resembles this using only CSS and no extra images?
Give me your thoughts on this idea.
Is it achievable to design a button that resembles this using only CSS and no extra images?
Give me your thoughts on this idea.
Indeed, you can achieve this effect by utilizing the box-shadow property. The sample code provided demonstrates how to implement it on an anchor (a) tag, but the same concept can easily be applied to a button.
a {
background: beige;
border-radius: 4px;
text-decoration: none;
display: block;
padding: 4px;
width: 100px;
text-align: center;
color: black;
-webkit-box-shadow: 0px 3px 1px maroon;
-moz-box-shadow: 0px 3px 1px maroon;
box-shadow: 0px 3px 1px maroon;
}<a href='#'>Text hover</a>To apply the effect on a button element: (Remember to include border: 0px as buttons come with a default border).
.shape {
background: beige;
border-radius: 4px;
padding: 4px;
width: 100px;
text-align: center;
-webkit-box-shadow: 0px 3px 1px maroon;
-moz-box-shadow: 0px 3px 1px maroon;
box-shadow: 0px 3px 1px maroon;
border: 0px;
}<button class='shape'>Text hover</button>Instead of relying on box-shadow, consider using only border-radius and a bottom border to achieve the same effect:
body {
background: #000;
}
button {
background: #B6B694; /* You may need to determine the exact color yourself. */
border: none;
border-bottom: 2px solid #f00;
border-radius: 5px;
display: inline-block;
font-size: 14px;
padding: 10px 14px;
text-align: left;
width: 150px;
}<button>Text hover</button>Kindly share the code you have attempted so far. In any case, give this a try.
body {
background-color: #333;
text-align: center;
padding-top: 20px;
}
button {
background: beige;
border-radius: 3px;
box-shadow: 0px 5px 0px maroon;
border: 0;
color: #333;
font-size: 17px;
padding: 10px 30px;
display: inline-block;
outline: 0;
}
button:hover {
background: #eaeab4;
box-shadow: 0px 5px 0px #4d0000;
}
button:active {
box-shadow: none;
margin-top: 5px;
}<button type="button">Text hover</button>Extracted from :
In this demonstration, Example Q illustrates a shadow that is offset towards the bottom and right by 5px, while applying a border-radius of 5px to each corner:
#Example_Q {
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 5px 5px black;
-webkit-box-shadow: 5px 5px black;
box-shadow: 5px 5px black;
}
On the other hand, Example R portrays the same shadow effect with an added blur distance of 5px:
#Example_R {
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 5px 5px 5px black;
-webkit-box-shadow: 5px 5px 5px black;
box-shadow: 5px 5px 5px black;
}
.sample {
-ms-border-radius:20px;
-o-border-radius:20px;
border-radius:20px;
}
To ensure cross-browser compatibility for the radius, utilize this code snippet to make it functional across all browsers.
give it a shot yourself
border-radius:10px;
-moz-box-shadow: 5px 5px 8px 9px #888;
-webkit-box-shadow: 5px 5px 8px 9px #888;
box-shadow: 5px 5px 8px 9px #888;
Seeking assistance from anyone who can help me with my current issue. I am currently utilizing bootsrap 4 and I need to come up with a solution for the following scenario: I have one element that is situated within the standard six columns, while the secon ...
I am working on a unique feature that involves two levels of drop down menus. When a user makes a selection in the first level, a corresponding set of options will appear in the second level. For example, I have 6 options in the first level, each with its ...
I'm currently working on implementing a responsive image carousel within the homepage index, which is displayed in the common layout page. However, when I decrease the height of the carousel-item div, the full image is not being displayed properly in ...
I'm currently dealing with a website that generates a random background color for a div every time it is refreshed. I have a code that successfully accomplishes this: var colorList = ['#FFFFFF', '#000000', '#298ACC', &ap ...
When working with HTML and its companion CSS, it is important to... Exploring HTML: <html> <head> <link href="css/breakLineInBrowser.css" rel="stylesheet"> </head> <body> <p> Line 1. Line 2. Lin ...
Our application is a single page that dynamically loads results based on query strings. The query string format we use is as follows: ?city=Delhi&pn=1 Within the SPA, there are different sections displayed on the same page. As users navigate through ...
I am currently working on a challenge in viewsessions.php. My goal is to retrieve multiple values from a database and group them into checkbox fields (such as typeofactivity, employer, date, time, amount as one combined checkbox field) using <input type ...
I'm having trouble assigning the text values of children to their respective parent's data element, as all the values are being combined. Here is my code: HTML <ul> <li class="item" data-v="1"> <div class="xyz" data-v="2"> ...
Managing a compact to-do list where you have the ability to add new tasks and when clicking on an item, it should toggle between two classes while removing one. <ul id="myUL" class="todoList"> <li class='todoList card border-primary&apos ...
I am attempting to align 2 images side by side while also ensuring they are responsive using Bootstrap. I have attempted to use the following code: <img src="..." class="float-left" alt="..."> <img src="..." class="float-right" alt="..."> wh ...
I have been utilizing Twitter Bootstrap to generate form components as illustrated below. Typically, the 'submit' button should be placed outside of the 'controls' container, however, for my specific layout requirements, I need it to be ...
Is there a way to make an image appear in a different location on the page when it's hovered over? I've searched online but couldn't find a solution using just HTML and CSS. Does anyone know how to achieve this effect? Image not hovered: ht ...
Currently, I am working on a function that includes a conditional statement to display an alert when a specific class name is removed from a div layer. Below is the code snippet: <div class="ui-tabs-panel ui-tabs-hide">panel</div> <div>& ...
I am currently utilizing the jQuery code below to dynamically create multiple input fields, which include time pickers and date pickers. However, I am encountering an issue where they are not functioning as expected. $('#add_another_event').clic ...
Encountering some challenges with the mobile menu on a website. The opening and closing animation of the background is functioning correctly, displaying the information as intended. However, when testing and clicking on one of the links, the animation simp ...
I'm having trouble aligning an input in a form to the center. Even though I have included display: block in the CSS, using margin-left:auto and margin-right: auto is not yielding the desired result. To illustrate the issue more clearly, I've cre ...
I am looking for a solution with my HTML table structure: <table> <tbody> <tr> <td>1</td> <td>2</td> <td class="treegrid-hide-column">3</td> < ...
Is there a way to hide an image but keep the containing div blank with the same dimensions? I want it to appear as if no content was there, maintaining the original width and height. For example: http://jsfiddle.net/rJuWL/1/ After hiding, "Second!" appea ...
I need help aligning my brand and the links on opposite sides (brand on left, other links on the right) for mobile view. The issue I'm facing is that the links on the right end up moving to the next line. Any suggestions or advice would be greatly app ...
After spending what feels like an eternity searching, I still can't figure out how to get the innerHTML of a script tag. Here's where I'm at... <script type="text/javascript" src="http://www.google.com" id="externalScript"></script ...