Is there a way to create a website button that has oblique (diagonal) sides on each side?
I haven't been able to find an exact example, but I did come across a similar design in about 10 minutes:
(check out the menu tabs for News, Video, Schedule, Standings)
In my case, however, I am looking to implement this design for an independent button rather than a menu tab.
If you want to create a button with a unique design, you can use the following HTML/CSS:
<div class="button">
Some unique button text
</div>
The corresponding CSS would be:
.button {
width: auto;
display: inline-block;
background-color: #f00;
height: 2em;
line-height: 2em; /* centering the text vertically */
}
.button::before,
.button::after {
content: '';
border-color: #f00;
border-width: 1em;
border-style: solid;
position: absolute;
top: 0;
bottom: 0;
}
.button::before {
border-top-color: transparent;
border-left-color: transparent;
right: 100%;
}
.button::after {
border-right-color: transparent;
border-bottom-color: transparent;
left: 100%;
}
.button:hover {
background-color: #0f0;
}
.button:hover::before {
border-color: #0f0;
border-top-color: transparent;
border-left-color: transparent;
}
.button:hover::after {
border-color: #0f0;
border-right-color: transparent;
border-bottom-color: transparent;
}
Interestingly, thirtydot shared a helpful tutorial link earlier today that demonstrates how to create slanted navigation:
Although the tutorial is for creating a navigation bar, the underlying principle should remain consistent for other design elements as well.
To achieve a seamless visual effect, employ slanted background images for individual elements and overlap them. If you wish to avoid using rectangular hit areas, consider utilizing an image map, although it may not be the preferred method in this case.
While it may not be the most technical solution, there is a fantastic tool called this site that can generate CSS for you, ensuring browser compatibility whenever possible.
Currently, I am working on a web chat application using next.js. The app includes an emoji picker button, which, when clicked, displays a menu of emojis. However, the issue I am facing is that the user has to scroll down in order to see the emoji menu. I a ...
Hey there, I have a specific requirement that I need help with. Check out the image here. I want to enable the LCM information box when the LCM checkbox is checked. Below is my code: <div class="panel-body "> <div class="c ...
It took hours to try to get them working, but still nothing. I attempted using media="xx" and @media, but the CSS doesn't seem to work at all, or only one of them works. I can't locate an obvious error, and it's becoming frustrating. <!D ...
I'm diving into the world of CSS compilers with Stylus for the first time, and I'm facing an issue with loading Google Web Font URLs correctly. Below is the code snippet causing trouble: @font-face { font-family: 'Roboto'; font-st ...
My attempt to align text to the right using a CSS rule is not working as expected when applied to a font within a cell. Can anyone help me troubleshoot this issue? Take a look at my code snippet below: CSS: .font1 { font-size: 60px; text-align: ...
On my website, I have implemented an Intersection Observer that monitors a specific element in the viewport. The observer triggers a series of classList.add() and classList.remove() methods, applying different animate.css animation classes. Everything work ...
<FormControl fullWidth component="fieldset" inputRef={register({ required: true })}> <FormLabel component="legend">Format</FormLabel> <RadioGroup row aria-label="format&q ...
I am currently attempting to create a square consisting of 4 smaller squares inside, but I have been facing challenges with the method I was using. Here is the code snippet: #grandbox { position: absolute; width: 204px; height: 204px; border: so ...
My website features a floating box on the side of the page (Parent div) housing a child div with a position:sticky property that scrolls along with the page as it reaches the top of the viewport. See it in action here: https://codepen.io/Xanthippus480/pen/ ...
So I've got this SVG file called 7.svg. What's the best way to show this image using HTML or CSS on my index.html page? ...
This button was created using Bootstrap. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <lin ...
The code I have implemented reflects my intentions. html: <div id="one" class="box"></div> <div id="two" class="box"></div> <div id="thr" class="box"></div> <div id="fou" class="box"></div> <div id="fiv" ...
I am experiencing difficulty in changing the background color of the 'About' button to yellow and the border color to blue when it is hovered over. Currently, only a small rectangle around the text changes to yellow on hover and I cannot figure o ...
When using materializecss select box in Internet Explorer 9 or higher, scrolling with the mouse button is not working. You must click on the scroll bar inside the select box for it to scroll. This issue does not occur in other browsers. I have attached a s ...
Hey Everyone, I've been working on an HTML5 canvas project where I set the canvas width to $(window).width(). Everything was going smoothly until I added a border, which caused a horizontal scroll to appear. Important: I attempted to use the innerWid ...
I am attempting to embed a Twitter video and twit in such a manner that they are perfectly centered on the page and also take up the entire width of the container (my-container). Here is the HTML code that I currently have: <div class="my-container"&g ...
Is it possible to display a textbox in javascript when a checkbox is already checked onLoad? And then hide the textbox if the checkbox is not checked onLoad? ...
Currently, my app relies on Material-UI v0.17.0 which is not compatible with React v16.0.0. In order to make it work, I need to upgrade to Material-UI v1.0.0. I came across a migration tool here, but it only updates import statements. Many props have chan ...
Is there a way to customize the appearance of BootStrap tooltips by changing the color and aligning the text to the left? I've tried various CSS modifications from different posts, but none seem to work. Any idea on how to alter the CSS of the tooltip ...
https://i.sstatic.net/IlXwE.gif Encountering an issue similar to the gif image provided. Upon deleting the first card, the content of the subsequent card is also removed. How can this be prevented? state = { data: '', todoCard: [ ...