Unique text: "Personalized button design without using SVG

I've been experimenting with creating a button using SVG, but unfortunately, it seems that SVG is not supported on Next.js & Material UI. Below you'll find the code snippet and screenshot I have been working with.

Any help or guidance would be greatly appreciated!

https://i.stack.imgur.com/c5OrR.png

span.button__publish {
    margin-left: 45px;
    position: relative;
}

.button__publish button {
    width: 137px;
    height: 37.3px;
    border-radius: 4px;
    background-color: #8ae38c;
}
*emphasized text*
<span class="button__publish">
  <button class="MuiButtonBase-root MuiButton-root MuiButton-text publish MuiButton-textPrimary" tabindex="0" type="button">
   <span class="MuiButton-label">Publish</span>
  </button>
</span>
htmlcssmaterial-uifrontendnext.js

Answer №1

To achieve the desired effect, you can utilize the clip-path property in CSS. While I have provided an example below, it will be necessary for you to determine the precise values that suit your specific requirements. For further guidance, consult MDN's documentation on clip-path.

span.button__publish {
    margin-left: 45px;
    position: relative;
}

.button__publish button {
    width: 137px;
    height: 37.3px;
    border-radius: 4px;
    background-color: #8ae38c;
    clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}
*emphasized text*
<span class="button__publish">
  <button class="MuiButtonBase-root MuiButton-root MuiButton-text publish MuiButton-textPrimary" tabindex="0" type="button">
   <span class="MuiButton-label">Publish</span>
  </button>
</span>

UPDATE: Please note that part of the border may be obscured with this method, as discussed in this thread. Refer to the suggested solutions to address this issue.

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

ChakraUI ForwardRef in React not applying variant to child component

Encountering an issue with the combination of forwardRef and Input from ChakraUI. Attempting to create a generic input component with a flushed variant, but facing difficulty as Chakra keeps resetting it back to default. ModalInput Component import { for ...

cssreactjsreact-propschakra-ui

Access Firestore documents within the NextJS 13 framework

As a newcomer to React/NextJS, I am working on fetching a list of documents from a Firestore Collection using NextJS 13 in a SSR Page so that I can display them below. Although I have successfully retrieved the documents within my function, the challenge ...

reactjsgoogle-cloud-firestorenext.jsnext.js13

What is the best way to adjust a 1px margin in Google Chrome?

Check out this example http://jsbin.com/oqisuv/ CSS body { background:#e7ebf2 url(http://i.imgur.com/R2VB6.png) center repeat-y; } .menu { width:989px; margin:auto; height:100px; background:#666666; line-height:100px; text-ali ...

htmlcssgoogle-chrome

What is the best way to retrieve a variable that has been exported from a page and access it in _

Suppose this is my pages/visitor.tsx const PageQuery = 'my query'; const Visitor = () => { return <div>Hello, World!</div>; }; export default Visitor; How can I retrieve PageQuery in _app.tsx? One approach seems to be by assi ...

reactjstypescriptnext.js

Toggle the visibility of items based on the user's login status

Below is the code snippet for when the user is logged out: <div class="fusion-secondary-main-menu"> <div class="fusion-row"> <?php avada_main_menu(); ?> <?php avada_mobile_menu_search( ...

javascriptphphtmlcss

Why isn't my NextJs function displaying on another NextJs page?

I recently encountered an issue while developing my NextJs app. I have a function in the 'Feed.tsx' page that is not rendering properly inside the 'Index.tsx'. Strangely, when I navigate to '/feed', the function works perfectl ...

reactjsnext.js

Does each imported module in a Next.js app run multiple times?

There is a common understanding that when a module is imported multiple times within a JavaScript program, it only executes once during the first import. Informative article: The concept is straightforward: each module is evaluated just once, meaning th ...

javascriptnext.jsvercel

Enhance your CSS link in Yii framework 2.0 by incorporating media printing capabilities

While working on Yii framework 2.0, I typically include a CSS file by adding the following code snippet to assets/AppAsset.php: public $css = [ 'css/style.css', ]; Upon inspecting the element in the web browser, I notice the following code ...

cssattributesmediayii2

What is causing my server to mysteriously alter the style of index.html?

After setting up a node, express, react app, I realized that when express serves static content like my CSS file, the source of the index.html shows an additional style tag in the head section: <style type="text/css">* {}</style> I confirme ...

htmlcssexpressserverstatic-content

The Mui Autocomplete component allows you to customize how groups are rendered by providing access

Is it possible to access the options object within the renderGroup function of the Autocomplete component, similar to how you can in the renderOption function? The signature for renderGroup in Mui is as follows: function(params: AutocompleteRenderGroupPar ...

reactjsmaterial-ui

CSS text width going from left to right

I am attempting to create a text fade effect from left to right, inspired by the technique discussed in this answer. However, I would like the text to be concealed behind a transparent background div instead of the white background used in the example. I ...

jquerycssfade

Launch a bootstrap modal from a different webpage

If you're looking to open multiple modals with different content displayed from HTML files, check out this example below: <div id="how-rtm-works" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" ...

javascriptjqueryhtmltwitter-bootstrapmodal-dialog

"Learn how to dynamically change the color of a button in Angular after it has been clicked

Can someone assist me in changing the button color to red after it has been clicked? I am looking for guidance on how to achieve this. The current code snippet is as follows: <td> <button mat-icon-button color="primary"> <m ...

htmlangularangular6

What is the best way to intelligently cache specific segments of a page in PHP?

Issue: I am working on a website with over 50,000 pages, the majority of which are only updated once at the time of creation. I am in the process of implementing caching for these pages since they do not require frequent content changes. However, I am fa ...

phphtmlcachingmeta-tags

Jekyll is not beginning line numbers from the first line as they should be

My website was put together using Jekyll, specifically with the Beatiful-Jekyll theme. To make syntax highlighting possible, I utilized Rouge. The issue arises when displaying line numbers alongside the code - sometimes they don't align properly or ar ...

cssjekyllblogsrouge

Fade in an image using Javascript when a specific value is reached

Here's the select option I'm working with: <div class="okreci_select"> <select onchange="changeImage(this)" id="selectid"> <option value="samsung">Samsung</option> <option value="apple">App ...

javascripthtml

What is the best way to apply a CSS class to my anchor tag using JavaScript?

I have a good grasp of using JavaScript to insert an anchor element into my webpage. For instance, var userName_a = document.createElement('a'); However, I am interested in adding a style name to that same element as well. I attempted the follo ...

javascriptcss

Incorporate a course within the conditional statement

Currently, I'm working on the development of an input site and one of my goals is to highlight empty fields. My plan is to check if a field is empty using an if statement and then apply a specific class that will serve this purpose. This is the JavaS ...

javascriptjqueryhtmlcss

"Troubleshooting problems with jQuery click function during real-time search execution

In my code, I have an empty result div that dynamically fills up with item elements as search queries are entered (using jQuery ajax). If I use the following code: $(".result").click(function(){ alrert("click on whole result class captured") }); I r ...

jqueryhtml

What is the best way to ensure that a specified number of list items (li) will align properly within the width of an unordered list (ul

I'm attempting to make all the li elements' width match that of my ul element. Here is the code I am using: http://jsfiddle.net/4XR5V/2/ I have looked at some similar questions on the website and tried adding: ul { width: 100%; display: tab ...

htmlcss