I am trying to create this specific button using CSS
https://i.sstatic.net/sLNzK.png
(source: gyazo.com)
Don't pay attention to the grey background
I attempted cropping the center and adding border top, left, right, but it still looks odd. Do you have any suggestions on how I can achieve this using only CSS?
The button has a white drop shadow, you can see a live preview here:
Is creating this button using just CSS possible?
Thank you.
Here's a little idea I came up with. Play around with different colors and fonts to achieve the look you want
a {
display:block;
width:200px;
height:40px;
background:#5a81ff;
color:#fff;
font-size:1.5em;
text-align:center;
text-decoration:none;
border:1px solid #656565;
border-top-color:#cacaca;
line-height:40px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 2px 0px rgba(176, 176, 176, 1);
-moz-box-shadow: 0px 2px 0px rgba(176, 176, 176, 1);
box-shadow: 0px 2px 0px rgba(176, 176, 176, 1);
}
p.s. Check out a demo here - http://jsfiddle.net/6zhDt/
p.p.s. For more information, watch this video by Lea Verou on multiple borders with shadows starting from around the tenth minute -
If you want to create Multiple Borders using the pseudo classes before: and after:, check out this helpful demo:
HTML Code:
<div id="borders"></div>
CSS Styling:
#borders {
position: relative;
border: 5px solid #f00;
width:100px;
height:100px;
}
#borders:before {
content: " ";
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
border: 5px solid #ffea00;
}
#borders:after {
content: " ";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border: 5px solid green;
}
Take a look at this interesting blog post on CSSTricks.com - http://css-tricks.com/snippets/css/multiple-borders/
I was using a Material UI button with a purple background. <Button component={Link} to={link} style={{ background: '#6c74cc', borderRadius: 3, border: 0, color: 'white', heig ...
Just starting out with Bootstrap and running into a little issue. Spent some time on it but can't seem to figure it out. Perhaps it's something simple that I'm overlooking. Essentially, my goal is to keep the nav-link active when navigating ...
In the following HTML snippet, we have a div#parent with multiple child elements: <div id="parent"> <div id="ch1"></div> <div id="ch2"></div> <div id="ch3"></div> .... <div id="ch1234">&l ...
Encountering a strange IE7 bug on two pages of a WordPress site I'm currently developing. Some divs are shifting to odd positions, with one completely off the screen: and another here: Additionally, possibly related or not, the "created by" link in ...
body { background: white; font-family: 'Ubuntu', sans-serif; } .cas { display: inline-block; border: 2px solid #0C8346; background: #0C8346; font-weight: 300; font-size: 20px; padding: 5px; width: 200px; text-align: center; ...
My question is related to this issue I am trying to arrange my checkboxes in 4 columns horizontally <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> ...
Lately, I decided to start utilizing tailwindcss and I have noticed that certain properties do not seem to function at all. However, when I incorporate them into my CSS directly, they work perfectly fine. Allow me to provide an example. const Step = styled ...
I have created a demo of my code in this JSFiddle and also included it below. The issue I am facing occurs in Google Chrome, so I would recommend using that browser to replicate and fix the bug. Please note that the code is a snippet from a larger project ...
I am looking to utilize swig (my chosen templating engine) for incorporating JavaScript code that will only display when the user selects the 'other' option from the select menu. <div class="form-group"> <select class="custom-select"&g ...
While working on a website using bootstrap, I encountered an issue with responsiveness when adjusting the text size and gap of the navigation items. By increasing the size and adding a gap through fs-4 and style="gap: 10vh;", the default small si ...
After combining the top and bottom blocks, I now have a gap in my layout. Is there a way to move this row up without causing any issues? I need assistance with resolving this problem using Bootstrap. <link rel="stylesheet" href="https://maxcdn.boots ...
$a = "ABCD"; ?> <link rel='stylesheet' type='text/css' href='others.php' /> <style> .page-title { text-indent: -9999px; line-height: 0; } .page-title:afte ...
I have a form that directs to another page and performs various database operations. <form id="form1" method="post" action="goes_to_page1.php" onsubmit="return checkformvalidation();"> <input type="text" id="field1" name="field1" onblur="checkva ...
I am currently working with the ToolTip component and I have a query regarding displaying two lines for the title text - one line for each language rather than having them displayed on a single line. Is it possible to achieve this and how can I style the c ...
Currently, I am attempting to implement an infinite horizontal scroll section in vuejs for a selection of products. However, I am facing difficulties achieving the infinite effect. My approach so far involved removing the card that goes out of view and add ...
I'm looking to implement a feature where any text I write starting with a # symbol automatically changes color to blue, and then returns to black once I hit the space key to end the text. I attempted to achieve this using the following logic within a ...
This is a form that consists of two labels: <form method="POST" action='/process' enctype="multipart/form-data"> <div> <label for="file" class="upload-button"><i class=" ...
I am trying to create a layout with right and left divisions where the size of the left division matches the height of the browser window (100vh). The left division consists of two sub-divisions that need to have variable sizes but collectively match the ...
When I try to add text to my absolute block inner div, it doesn't expand as expected. I am aware that expanding within a parent container with a specified width, such as <div class="main_wrap"></div>, can be problematic. Unfortunately, I ...
I have a question about this situation Each time the button is clicked, jQuery toggles the class: .transition { background-color: #CBA; transform: translateX(100px) scale(0.5) rotate(180deg); } Within the <div class="container2"> And upon ...