Having trouble recreating button design in css

drafty 0
Viewed 52

enter image description here

How would I recreate this effect in CSS ? It should be two separate buttons that link to different information but I would like to have them placed and shaped like this.

css html
2 Answers

I tried my best to solve your error and get answer which you want but there are some little mistake in code about button border so please make sure that you can solve it.

Thank you

input#button1 {
    width: 50%;
    height: 50%;
    clip-path: polygon(0 1%, 100% 0%, 75% 100%, 0 100%);
    border: 5px solid;
    background-color: #ffefe2;
    position: fixed;
    border-radius: 25px;
      right: 48%;
    z-index: 11;
}
input#button2 {
    float: right;
    width: 50%;
    height: 50%;
    clip-path: polygon(27% 0, 100% 0%, 100% 100%, 0 100%);
    border: 5px solid;
    background-color: #ffffff;
    position: fixed;
    left: 45%;
    border-radius: 25px;
}
<div class="main">
<input type="submit" id="button1" value="Button1">
<input type="submit" id="button2" value="Button2">
</div>

i hope this code will help you.....

you can also use this website to get different buttons and codes https://getcssscan.com/css-buttons-examples

Jignesh Rathod0

so i try to use div instead of a button and this is what i get

.center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.flex {
    display: flex;
}

.button1 {
    height: 0;
    width: 150px;
    border-top: 150px solid green;
    border-right: 100px solid transparent;
    margin-right: -100px;
}

.button2{
    height: 0;
    width: 150px;
    border-bottom: 150px solid blue;
    border-left: 100px solid transparent;
}
<div class="center">
        <div class="flex">
            <div class="button1">
                1
            </div>
            <div class="button2">
                2
            </div>
        </div>
    </div>

now to turn the div into a button we can use javascript. If you havent learn javascript maybe learn how to manipulate the DOM and add n eventlistener on click.

learn the Dom : https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#active_learning_basic_dom_manipulation onclick : https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event

i hope it help

Arnoud0
Related