.myButton {
float: right;
border-top: 40px solid pink;
border-left: 40px solid transparent;
border-right: 0px solid transparent;
width: 25%;
}<div class="myButton">
Submit
</div>This snippet is the code I have written to create a button with a unique shape, similar to the image below. However, I am facing an issue where the text "Submit" is not centered as intended and appears lower than expected. Can anyone provide a solution to this problem?
To create a unique background effect, you can utilize the linear-gradient property. This technique involves setting a fixed height and then applying padding that is equal to the height multiplied by the square root of 2:
.my-button {
border: 0;
height: 40px;
background: linear-gradient(45deg, transparent 40px, pink 40px);
padding-left: 56.5691px; /* 40 × √2 ≈ 56.5691 */
}<button class="my-button">Submit</button>You can also achieve a similar result using an absolutely positioned pseudo-element:
.my-button {
background-color: pink;
position: relative;
height: 40px;
margin-left: 40px;
border: 0;
}
.my-button:after {
content: "";
position: absolute;
top: 0;
left: 0;
/* Move pseudo-element to the left to 100% of its width */
transform: translateX(-100%);
border-top: 40px solid pink;
border-left: 40px solid transparent;
border-right: 0px solid transparent;
}<button class="my-button">Submit</button>The problem lies in the fact that you are using a top border instead of a background, causing your text to appear off-center within your shape. To resolve this issue, you can utilize positioning to manually adjust the position of your text:
.myButton {
float: right;
border-top: 40px solid pink;
border-left: 40px solid transparent;
border-right: 0px solid transparent;
width: 25%;
position: relative;
}
.inner {
position: absolute;
top: -30px;
left: 40px;
}<div class="myButton">
<div class="inner">Submit</div>
</div>I have been experimenting with dynamically creating tabs using uib-tabset. Each tab is supposed to contain a different form, but the issue I am facing is that the textbox from the first form is being overwritten by the newly generated tab. When I enter d ...
Looking to create a multi-level drop-down menu using TypeScript without relying on jQuery? Bootstrap CSS framework may not have exactly what you need. Wondering how to implement a multi-level dropdown in your Angular project using HTML, CSS, and TypeScrip ...
Despite setting up a flexbox to align my elements, I am struggling with vertical centering on my page. I have made sure to use a container for the page and set brute size with viewport units. Here is my sandbox: https://codesandbox.io/s/rlk3j68pmq. Belo ...
I have applied some custom css styling in my global style.css file (src/style.css) for my Angular project. However, I encountered a problem when trying to override this styling in a specific component without affecting the rest of the project. Currently, I ...
I am completely puzzled by the appearance of this issue. This snippet shows my Google Map script: <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places,geometry"></script> Below you can see that I have defined lat ...
https://i.stack.imgur.com/y6F74.png I am currently working with a CSS Grid layout and facing an issue where I want to center the child elements horizontally. In the image provided, my goal is to have "Queen" displayed in the center rather than on the left ...
How can I create a search functionality that displays array object names based on the number of letters entered? When I input one letter, only one result shows up on the HTML page, even though the console.log displays several results. The desired output is ...
I encountered this specific error message: Error: Anticipated 'styles' to be a collection of strings. Despite the fact that I have clearly defined the styles as an array of strings: styleUrls: ['./app.component.css'] Can anyone pinp ...
Can someone please assist me? I am attempting to replicate a website, but I am unsure how to center align an icon list and content. Currently, it appears like this; https://i.stack.imgur.com/6FZCr.png I would like it to look like this; https://i.stack.im ...
I am currently working on a page located at However, I have encountered an issue where the footer is not displayed properly when the screen size is changed. Below is the CSS code for the footer: #footer_1 { background: url("../images/bgfooter2.png") ...
https://i.sstatic.net/xIi8m.png I'm trying to center align the checkbox between the Input and Button elements. I attempted using the "align-center" class in the "form-check" div, but it didn't work as expected. Could someone please provide me wi ...
I encountered an issue while attempting to utilize an npm package containing a Typography element from Material UI. The code is authored by me. Upon integrating it into a project, I noticed that the typography's CSS class properties were overpowering ...
I've recently adopted a unique technique for managing vertical spacing in front-end design by using transparent <hr> elements as spacers. I understand that this method is not favored among most of the web community, but I believe it has its meri ...
When using JavaScript to update a meter's value, I encountered an issue: var LFRMSMeter = document.getElementById("LFRMSMeter"); LFRMSMeter.value = parseFloat(j[0]); Although the updating of the value works fine, hovering over the meter displays the ...
I'm having a text field with a jQuery hint. How do I align the font to be in the middle? I've attempted using vertical-align: middle but it doesn't seem to work. <style type="text/css"> #name { border: 1px solid #c810ca; heig ...
[I'm having trouble isolating links that contain the specific text '/Archive.aspx?ADID='. Even though I have tried to filter for these specific links, I end up retrieving all of the links from the webpage. Once I am able to extract the desir ...
Hey there, I'm new to working with AngularJS. I have a scenario where I want a method to be triggered when I change the date, opening a modal. However, when I use the ng-change event, the method is not called upon date change. If I switch to using ng- ...
As a design student, I am working on creating a family tree website where users can click on individual circles (ancestors) to view their lineage. Everything has been functioning smoothly so far, except for when attempting to display the lineage of specifi ...
As I work on my first website using GitHub pages, I've noticed that it can be frustrating to constantly clear the cache or open an incognito window whenever I add something new. I'm thinking about incorporating Jekyll into my workflow so I can t ...
this code dynamically binds a nested loop in the sidebar <ul class="nav metismenu" id="side-menu" *ngIf="concatMenulist?.length > 0"> <li *ngFor="let menu1 of concatMenulist"> <!--level 01--> ...