Is it possible to create Bootstrap 4 buttons with hexagonal left and right sides, as shown in the image below?
https://i.sstatic.net/BkU2E.png
I have tried implementing solutions from a similar question but styling them with Bootstrap 4's .btn classes has not been successful: Elongated hexagon shaped button using only one element
When @chriskirknielsen commented, he emphasized the importance of understanding the code before making any modifications to suit your specific requirements.
body {
/* JUST FOR STYLING */
background-color: #3c93af !important;
}
.custom_btn {
position: relative;
display: block;
background: transparent;
width: 300px;
height: 80px;
line-height: 80px;
text-align: center;
font-size: 20px;
text-decoration: none;
color: #ffdc01;
margin: 40px auto;
font-family: Helvetica, Arial, sans-serif;
box-sizing: border-box;
}
.custom_btn:hover {
text-decoration: none;
}
.custom_btn:before,
.custom_btn:after {
position: absolute;
content: '';
width: 300px;
left: 0px;
height: 34px;
z-index: -1;
box-sizing: content-box;
}
.custom_btn:before {
transform: perspective(15px) rotateX(3deg);
}
.custom_btn:after {
top: 40px;
transform: perspective(15px) rotateX(-3deg);
}
.custom_btn.custom_btn--border:before,
.custom_btn.custom_btn--border:after {
border: 4px solid #ffdc01;
}
.custom_btn.custom_btn--border:before {
border-bottom: none;
}
.custom_btn.custom_btn--border:after {
border-top: none;
}
.custom_btn.custom_btn--border:hover:before,
.custom_btn.custom_btn--border:hover:after {
background: #ffdc01;
}
.custom_btn.custom_btn--border:hover {
color: #fff;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<a href="#" class="custom_btn custom_btn--border">Click me!</a>My goal was to increase the height of the "scroller" div and place it at the end of the success call back function. Within this callback, I dynamically insert some inner divs into the "scroller" div. The default height of the scroller div is 400px. If it ...
Incorporating a fade out transition into my child component, <Welcome />, using Material UI's Fade component is my current goal. This transition should be triggered by two specific conditions: The timeout set in the useEffect function expires. ...
Looking for a way to create a textarea with dynamic height that adjusts as the user adds new content? The resize property is set to none and overflow is hidden. It seems to be working correctly in Chrome, but Firefox is presenting some mysterious issues wi ...
I am attempting to create a simple animation by shifting the background position (frames) of the image which serves as the background for my div. Utilizing Jquery, I aim to animate this effect. The background image consists of 6 frames, with the first fr ...
Seeking advice from someone: Scenario: Currently, I have <div id="breadCrumb" style="width:80%"></div> Now, I want to update the width to 100% and retrieve the width in pixels on click $('#menu_toggle').on('click', funct ...
Context To many, this situation might appear to be repetitive. However, I assure you that it is not. My objective is to import html data into a WebView, while being able to intercept user hyperlink requests. During this process, I came across this helpfu ...
My desktop website appears exactly as I want it to. When inspecting the site on the console to test responsiveness, everything seems fine. However, once I upload the changes to AWS and view the website on my phone, the vh and flexbox properties are not fun ...
For my application's admin panel design, I've divided my home into containers. The aim is to display details of clicked items in Images.html and Categories.html when a menu item in the 2nd container (also known as side bar) is clicked. However, m ...
I need to trigger the function handleRangeUpdate in a way that it responds to the event calling it and decides whether to run console.log(this.value). The problem arises when I pass e into handleRangeUpdate using addEventListener, causing the value of thi ...
After receiving a response, I noticed that the HTML body contains a hidden form along with an internal JavaScript function to submit the form (view snapshot here). Is there a method in JMeter to execute JavaScript code that directly submits a form? I am ...
When I am at the top of the page, I want to display the phone number and email above the navigation bar. However, as soon as I start scrolling down, I want the phone number and email to disappear and only show the navigation bar. I have attempted using fix ...
<section> <div class="container"> <select name="semester" id="select-semester"> <option value="no-semester">choose a semester</option> <option valu ...
I've developed a tool that enables users to adjust contrast and brightness of images online using CSS3 filters. Now, I have obtained two values for brightness and contrast ranging from 0 to [inf], where "1" indicates no change in brightness/contrast. ...
Whenever I attempt to run 'npm run build', an error crops up that seems to be linked to the css and fonts. Unfortunately, I am unsure of how to tackle this problem. It's perplexing as the app functions perfectly fine in development mode. Th ...
Is there a way in CSS to only display a background image if it can be fully shown without setting the width in pixels? I want to avoid showing partial background images. Is there a CSS property that can help with this? [] <div align="left" style="pad ...
Why is the adminbox floating when no command is present? The fixed div center is not functioning properly .adminbox { width: 200px; height: 17px; margin-top: 20px; padding: 20px; font-size: 12px; ...
Utilizing flask and bootstrap, I am in the process of developing a website involving tensor-flow. Currently, users input code into a form, which triggers flask and html code to load the page after completing all data computations. This results in significa ...
My objective is : To display a popin when the user clicks on a button To hide the popin when the user clicks elsewhere I previously implemented this solution successfully: Use jQuery to hide a DIV when the user clicks outside of it However, I wanted to ...
<div id="great-grandfather"> <div id="cousin"></div> <div id="uncle"> <div id="me"></div> </div> </div> I find myself at $("#me") , and I want to choose my cousin, with code like : $("#me").find( ...
Using Vaadin 14.1.19 in a project called "My Starter Project," I attempted to create a TextArea that supports multiple lines. Initially, everything seemed fine, but upon resizing the TextArea, it failed to adjust the number of visible lines. Here is the co ...