Check out the button design linked below:
I attempted to recreate this design using before and after, but I want the arrow to be softer. I tried skewing it as well. I also searched for references, but couldn't find similar examples online even though it seems like a simple and common design.
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&family=Poppins:wght@300&display=swap');
body {
background: #fff;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Montserrat', sans-serif;
font-family: 'Poppins', sans-serif;
}
/* ------------------------- Separate line ------------------------- */
:root {
--breadcrumb-theme-1: #398AB9;
--breadcrumb-theme-2: #DFDFDE;
--breadcrumb-theme-3: #1C658C;
--breadcrumb-theme-4: #FFF;
}
a{
font-size: medium;
}
.breadcrumb {
text-align: center;
display: inline-block;
box-shadow: 0 2px 5px rgba(0,0,0,0.25);
overflow: hidden;
border-radius: 5px;
counter-reset: flag;
}
.breadcrumb__step {
text-decoration: none;
outline: none;
display: block;
float: left;
font-size: 14px;
font-weight:bold;
line-height: 36px;
padding: 0 10px 0 30px;
position: relative;
background: var(--breadcrumb-theme-2);
color: var(--breadcrumb-theme-1);
transition: background 0.5s;
}
.breadcrumb__step:first-child {
border-radius: 5px 0 0 5px;
}
.breadcrumb__step:first-child::before {
left: 14px;
}
.breadcrumb__step:last-child {
border-radius: 0 5px 5px 0;
padding-right: 20px;
}
.breadcrumb__step:last-child::after {
content: none;
}
.breadcrumb__step::after {
content: '';
position: absolute;
top: 0;
right: -18px;
width: 36px;
height: 36px;
transform: scale(0.707) rotate(45deg);
z-index: 1;
border-radius: 0 5px 0 50px;
background: var(--breadcrumb-theme-2);
transition: background 0.5s;
box-shadow: 2px -2px 0 2px var(--breadcrumb-theme-4);
}
.breadcrumb__step--active {
color: var(--breadcrumb-theme-2);
background: var(--breadcrumb-theme-1);
}
.breadcrumb__step--active::before {
color: var(--breadcrumb-theme-1);
}
.breadcrumb__step--active::after {
background: var(--breadcrumb-theme-1);
}
.breadcrumb__step:hover {
color: var(--breadcrumb-theme-2);
background: var(--breadcrumb-theme-3);
}
.breadcrumb__step:hover::before {
color: var(--breadcrumb-theme-1);
}
.breadcrumb__step:hover::after {
color: var(--breadcrumb-theme-1);
background: var(--breadcrumb-theme-3);
}<div class="breadcrumb">
<a class="breadcrumb__step breadcrumb__step--active" href="#">Choose product</a>
<a class="breadcrumb__step" href="#">Place order</a>
<a class="breadcrumb__step" href="#">Shipping</a>
<a class="breadcrumb__step" href="#">Booking</a>
<a class="breadcrumb__step" href="#">Complete</a>
</div>Looking to integrate the react-csv-viewer component into a static HTML page without deploying it on a local server. I've tried following the instructions from the React tutorial, but am struggling with the build process. My goal is simple - to use th ...
When I try to set the "height" CSS property in percentage (%) for a div element, the HTML doesn't render anything. However, if I set the "height" CSS property using length values such as px or cm, it works perfectly fine. Can anyone provide assistance ...
I am currently working with bootstrap text boxes in the following manner: <div class="row"> <div class="col-lg-4"> <p> <label>Contact List</label> <select class="form-control" id="list" name="li ...
I have a div containing an anchor tag, like so: <div onclick="redirect to one location" style="height:200px;width:200px"><a href="http://www.google.com" >text</a></div> The div has dimensions of 200px by 200px and on click, it sho ...
I am facing an issue with positioning a bomb image on a background city image in my project. The canvas width and height are set based on specific variables, which is causing the bomb image position to change on larger mobile screens or when zooming in. I ...
<?php // Specify the directory path, can be either absolute or relative $dirPath = "C:/xampp/htdocs/statistics/pdf/"; // Open the specified directory and check if it's opened successfully if ($handle = opendir($dirPath)) { // Keep readin ...
I have been exploring different methods to record audio using HTML5, but so far I have not found a solution. I attempted to utilize this particular example without success. It seems that the statement about lack of support from any browser may be true. ...
FIDDLE I have a situation where I need to position an element absolutely, like a drop-down menu. However, when the window is resized and becomes narrow, there is not enough space for it. My requirements are: - The right edge of the dropdown should not g ...
I'm a beginner in angular 2 and I have a button with a dropdown. When I select an option from the dropdown, I want its value to be displayed on the button. The CSS code for styling the dropdown is provided below: .common_select_box { width: 100%; } ...
Recently, I've been working on scraping tables from websites and I'm currently trying to extract a table from . After some research, I found that using the rvest library along with the html_table() function worked best for me. In fact, I successf ...
I came across a pdf document with the following content: <div class=**"cs6C976429"** style="width:671px;height:18px;line-height:17px;margin-top:98px;margin-left:94px;position:absolute;text-align:left;vertical-align:top;"> <nobr ...
After testing the following code, I achieved successful results: <asp:Content runat="server" ID="CNT1" ContentPlaceHolderID="CPH1"> <div id ="CNT" runat="server"> <input name="btnName" type="submit" runat="server" id="btnId" cli ...
Currently, I am working on a project that involves using react JS and I am trying to find a solution for implementing linear gradient in multiple boxes. Specifically, I want to achieve the effect of having three identical boxes lined up next to each other. ...
I am trying to incorporate a select menu inside of a popover, but every time I attempt to do so, the popover content block remains blank. The popover is associated with a side menu item called "Date History". Below is the code snippet I am using to constr ...
I am facing an issue where a string containing HTML escape characters (such as < and >) needs to be rendered inside a div using innerHTML. The intention is for the escaped characters to appear as text rather than as actual HTML, but they still render ...
I am facing some difficulties with this code. I am attempting to use the "onClick" function to change the image once it is clicked, open a new page in a new window, print the newly opened window, and then close it. The issue I am encountering is that while ...
Hello, I'm new to Python and still learning the ropes. Currently, I am attempting to locate something on a particular website. Here is what I'm looking for: <div class="price">$ 1.67<span class="discount">-19.71%&l ...
When a checkbox is checked, I want to activate an animation. Here is the HTML code I am using: <div data-role="fieldcontain" > <fieldset data-role="controlgroup" data-type="horizontal"> <input type="checkbox" class="mediaCheckbo ...
Struggling to integrate JS into my Django project, I received the following message in the console: HTMLCollection(2) [p.currency-one, p.currency-one] HTMLCollection(2) [input.amount-one, input.amount-one] app.js:21 Uncaught TypeError: c1.addEventListener ...
Currently, I am developing an Angular pick-ban overlay for organizing League of Legends tournaments. However, I have stumbled upon some fundamental challenges and am unsure if the task is achievable. My main issue is: Can I dynamically alter the background ...