What is the process for creating a polygon button similar to this one?

I designed a button with a chevron shape similar to the one shown in this Image (Button) link. I have written the code as seen below, but I am facing difficulty creating the blue component on the left side and applying border-radius and box-shadow properties to match the image accurately. Can someone assist me in solving this issue?

body{
  background-color:#cacaca;
}

.button{
  margin-top:40px;
  margin-left:50px;
}

.button-shape{
  background-color:#fff;
  outline:none;
  text-decoration:none;
  color:#16215C;
  padding:13px 45px;
  clip-path: polygon(90% 0, 100% 75%, 95% 100%, 3% 100%, 10% 70%, 0 0);
  border-radius:0 0 10px 0;
  box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
}

.button-shape:hover{
  background-color:#16215C;
  color:#fff;
}
<div class="button">
  <a href="#" class="button-shape">Read More</a>
</div>

htmlcssbutton

Answer №1

To add a drop-shadow filter to the button, you can include the following CSS code:

filter: drop-shadow(-4px 0px 0px #0862A8);


body{
  background-color:#cacaca;
}

.button{
  margin-top:40px;
  margin-left:50px;
  filter: drop-shadow(-4px 0px 0px #0862A8);
}

.button-shape{
  background-color:#fff;
  outline:none;
  text-decoration:none;
  color:#16215C;
  padding:13px 45px;
  clip-path: polygon(90% 0, 100% 75%, 95% 100%, 3% 100%, 10% 70%, 0 0);
  border-radius:0 0 10px 0;
}

.button-shape:hover{
  background-color:#16215C;
  color:#fff;
}
<div class="button">
  <a href="#" class="button-shape">Read More</a>
</div>

Just a heads up, if you want to achieve the same effect precisely, using images is another option:

https://i.sstatic.net/aUDUM.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The header section on a website not behaving as expected in the Chrome browser

For my website, I want it to look like this in Internet Explorer: https://i.stack.imgur.com/hSkVM.png ^^ This is the IE view However, in Chrome, it displays like this: https://i.stack.imgur.com/noQw8.png The issue is with the Top bar on Chrome showing co ...

htmlcssinternet-explorergoogle-chrome

An issue with the count of sub-items in a list

Displayed below is the dynamically generated code (within <li> </li>) and will be removed in due course. <div class="popup-content"> <ul id="ulpopup" class="share-items-list"> <li> <div class="item- ...

jqueryhtml

The CSS form appears to be too large for the page

On every single one of my pages, the content fits perfectly within the body: However, when I have forms on the page, they extend beyond the footer and the body doesn't resize accordingly: Where could the issue be coming from? ...

asp.net-mvc-3htmlcss

What is the best approach for Angular directives: utilizing a single object or separate values as attributes?

This question pertains to best practices, but I do believe there is a definitive answer. I have a directive that offers six customizable options. Should I assign each option to a separate attribute on the directive (as shown below): <my-directive my ...

javascripthtmlangularjsangularjs-directiveattributes

Simple solution for generating image mappings efficiently

Creating an image map can be a tedious task, especially when dealing with complex shapes that require pinpoint accuracy. Is there a tool available that simplifies the process by allowing easy plotting of points for mapping? ...

asp.nethtmlimage

Generating an HTML hyperlink to trigger a button click event on another page

After implementing the code snippet below, I successfully managed to create a stylish Link with parameters that directs users to a specific page: <style> .fancy-link{ color: #FFFFFF; text-decoration: none; transition: ...

htmlcss

The justify-content-sm-center behavior in Bootstrap seems to be malfunctioning

I am facing an issue with justify-content-sm-center in Bootstrap 5. It is not functioning as intended when trying to center a specific div on smaller screens (below 578px). I have applied the justify-content-sm-center class to the div, but it does not work ...

cssbootstrap-5

Which file directory should I specify when using ng-include?

My project structure in Angular looks like this web server.py ##flask server program app static app.js controllers.js etc... templates index.html home.html In my index.ht ...

htmlangularjsfilepathpartialsangularjs-ng-include

CSS3 Perspective Issue: Solutions for Fixing

I'm currently working on creating a card flip animation that flips in the X axis direction. Right now, the div rotates using the rotateX() method. I attempted to add the perspective property to the upper div, but it ended up distorting my div structur ...

javascripthtmlangularjscss

Guide on incorporating data from a text file into an HTML table

I'm attempting to showcase the records from upload.txt in an HTML table. The location of the upload.txt file is at this URL: http://localhost:3000/upload. When accessing this URL, it retrieves the upload.txt file. Currently, I am using node.js for r ...

jqueryhtmlajax

If the Ajax request is successful, scroll to the bottom of a Div using jQuery

An interesting scenario arises with this Div that contains user messages, where the newest message always appears at the bottom of the Div and triggers a scroll bar if the message count exceeds the height of the div: <div class="list-group-message" s ...

javascriptjqueryhtmlajaxautoscroll

exciting, showcasing a dependency map using svg within an html5 environment

I am working on creating a polygon background for my menu, which needs to be responsive in design. Here is an example of what I am trying to achieve: example image. Should I use JavaScript to listen for size changes and adjust the points for the polygon e ...

javascriptcsshtmlsvgtwitter-bootstrap-3

Adding a mute/unmute button to your web browser's audio player: A quick guide

My code is functioning perfectly, but I am facing an issue with the lack of mute/unmute buttons. Can someone please help me figure out how to add them? <audio src="MUSIC URL" autoplay loop> <p>Your browser does not support the audio elem ...

javascripthtmlcssaudioaudio-player

The circular shape of a border-radius becomes distorted when scaling at various browser zoom levels

My challenge involves a small circle with a 4px diameter that I need to scale using anime.js. While it works perfectly at 100% zoom (default), I also require it to behave consistently across different zoom levels, specifically from 50-100%. To see the iss ...

cssanime.jsborder-radius

Issues with Internet Explorer causing headaches with CSS :first-child selector malfunctioning, experiencing strange behavior when utilizing Google Web Fonts

Having some trouble with the layout of a website, particularly in IE. The issue can be observed at . When comparing the page in IE to Firefox, there are noticeable differences. Firstly, the top module on the right side is not displaying correctly in IE. I ...

htmlcsscross-browserinternet-explorer-9css-selectors

Issue with Internet Explorer 7 causing table to display with added height

Currently investigating why there is additional space being added by IE. The only fixed data is the width of the image (171 px). Using Jquery, I checked the height of the div in Firefox, Chrome, and Opera which came out to 164px, but in IE 7 it's 172 ...

htmlcssinternet-exploreralignment

toggle the outer div along with its corresponding inner div simultaneously

On one of my pages (let's call it "page1"), I have multiple divs, some nested within others. These divs are initially hidden and toggle on when a specific link is clicked (and off when clicked again). To view a nested div, the outer div must be opened ...

javascripthtmlcssnested

Dynamic grid arrangement showcasing cells of varying heights

I am dealing with a grid layout where cells are dynamically generated using the following code: <style> .calWrapper{ width:200px; float:left; } </style> <div class="container"> <?php for($i=1; $i<=12; $i++){ echo ...

htmlcssgrid-layout

Change the chosen item to uppercase within a dropdown menu using pure vanilla JavaScript

I am trying to achieve a specific effect where the text is uppercase only on the selected option within a <select> element. I came across a solution using jQuery in this article, but I need to convert it to plain JavaScript (vanilla JS). I have made ...

javascriptcss

Does the input password typically submit on its own?

When attempting to create a form, I encountered an unexpected behavior. <form> <input type="text" autocomplete="username" style="display:none;"> <label for="password">password:</label><input type="password" autocomplete="c ...

html