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

What are the ways to incorporate the width property in @media queries within CSS?

I've been struggling to set the width inside @media in my code, but it's not working as expected. Here is what I have tried: mat-toolbar { app-toolbar-left { width: 35%; } app-toolbar-right { width: 22%; } } @me ...

cssresponsive-designmedia-queries

Encountering an issue with receiving an empty array after submitting a form in redux-form integrated with material

In my project, I am implementing redux-form along with material-ui. You can find detailed instructions on how to do this here. Here is a snippet of the code I have written: import React from 'react'; import { Field, reduxForm } from 'redux ...

reactjsmaterial-uiredux-form

Ways to resolve the issue with TypeError: CSS2Properties lacking an index property setter for '0'

I'm currently working on application development using ReactJs and Material UI. When I try to open the application in Mozilla Firefox, an error message pops up saying "TypeError: CSS2Properties doesn't have an indexed property setter for ' ...

cssreactjscross-browsermaterial-ui

Trouble with highlighting the chosen menu item

I have been attempting to implement this code snippet from JSFiddle onto my website. Although I directly copied the HTML, used the CSS inline, and placed the Javascript in an external file, the functionality does not seem to be working properly. Feel free ...

javascriptjqueryhtmlcss

Endless cycle of invoking functions in Angular.js

Issue with the template : <div class="container"> <h1>Process Definitions</h1> <table class="table table-stripped" > <tr> <td><strong>Name</strong></td> <td><strong>Id</st ...

htmlangularjs

Creating identical height columns with uniform inner elements is a problem that needs to be solved with caution. The proposed solution

Issue: I need to create a responsive layout with 5 columns, each containing an image, title, and text. The goal is to align the images separately, titles together, and texts individually while ensuring that all elements in a row have the same height. Solu ...

javascripthtmljquerycssbootstrap-4

Is it possible to leverage specific client-side Javascript APIs on the server-side?

Exploring APIs designed for web browsers that require their .js code to return audio streams. In a broader sense, these APIs provide byte streams (such as audio) for playback in the browser. Is it possible to use these APIs in server-side Javascript frame ...

javascriptnode.jshtmlbrowserhtml5-audio

The React Date Picker is experiencing an issue where it is being obscured by the overflow parent, leading to a problem

I am attempting to trigger the date selection popover in react datepicker to appear from a material UI menu item. By setting my menu item as the input field for react datepicker, I encountered an issue where the popover opens within the menu itself. My go ...

reactjsmaterial-uireact-datepickerpopper.js

Create a CSS popup alert that appears when a button is clicked, rather than using

Is there a way to customize CSS so that the popup alert focuses on a button instead of just appearing like this? I have implemented this type of validation for a text box: <div class="form-group"> <label class="control-label col-sm-3" for="judul ...

javascriptjqueryhtmlcss

What is the best way to design a scalable row of square elements using Bootstrap 5?

Looking to create a set of 6 Bootstrap 5 cards in square dimensions to function as buttons. Each card should be col-xl-2 wide and exactly square in height. I've started creating the cards with the code below. Can anyone provide guidance on how to ach ...

htmlcsstwitter-bootstrap

The constructor for audio in Next JS cannot be found

I'm facing an issue and struggling to find a solution. My project follows the standard structure of Next JS. In the root directory, I have included a components folder. Within the components folder, there is a component with the following code: imp ...

javascriptnext.jsweb-audio-api

An unusual visual anomaly (a small line appears) when hovering over a button in the web browser

There is a peculiar issue with some buttons on a web page where a strange line appears on the right side when hovering over the button. This problem only affects the first two out of three buttons, possibly because there is no fourth button to trigger the ...

cssbuttonhover

What is the best way to get rid of the blue color border around the input fields on Micromax A110 and Sony Ericsson phones?

I am currently experiencing an issue with my application where a blue outline color is appearing on the input field for Micromax A110 and Sony Ericsson mobile devices, while all other Android devices do not have this problem. I am unsure of the exact reaso ...

htmlcss

Tips for altering the label color of an md-input-container after text has been entered

Is there a way to dynamically change the color of an md-input-container label after certain input is added? The default grey color gives the impression that the field is disabled. I specifically want to modify the color of the label "Description" when the ...

cssangularjs

Add a new to-do list item to the current list using jQuery

Currently, I am in the process of developing a todo list application using jQuery. However, I have encountered some issues and bugs that are causing challenges. Initially, my objective was to set the first element through HTML code, which is functioning as ...

htmljquery

Is there a versatile spell-checking tool available for HTML text boxes?

When designing a text box in HTML, I want to provide real-time input validation and spell check for the user's text. My goal is to underline any spelling mistakes as they type. This seems like a basic feature, but I've yet to find a plugin or AP ...

javascriptjqueryhtmlvalidationjquery-ui

What is the best way to integrate a ttf custom font into my Rails application?

Despite following the instructions in this thread, I am unable to achieve the same results. main.css h1 { font-family: 'Shadows Into Light', serif; src: url('/assets/fonts/shadows.ttf') format("Shadows Into Light"); font-size: 4 ...

cssruby-on-railsfonts

Sentry is causing issues with the build of my Next.js application

After integrating Sentry into my Next.js project, I have encountered an error that is preventing the application from building. The same error also occurs at runtime, but what confuses me is why it's affecting the build process. Is there a way to conf ...

next.jssentry

Angular styling and form error issue

Hey there! I'm new to Angular and facing a major issue along with a minor styling problem. Let's start with the big one: <mat-form-field appearance="fill"> <mat-label>Password</mat-label> <input matInput ...

javascripthtmlangulartypescriptforms

Website Task Organizer for Effective Online Management

I need assistance with a task management system I am developing for a class project. The system is not functioning correctly as information is getting lost before reaching the server and some PHP code snippets are visible on the website. Can someone please ...

phphtmldatabase