I can't seem to get these two buttons line up buttons like this. How can I do this?

Huzaifa Aziz

Design:

enter image description here

Explanation: So I used a div and added CSS (display: inline-block;) and width to it, they were perfectly fine, when I added a tag into it to actually make the buttons do something they went on top of each other, I have tried wrapping them tag in another div but can't seem to make it work.

Here is how they look right now:

enter image description here

HTML:

export default function About() {
    return (

        <div className="About--div">

            <h3 className="About--name">Huzaifa Aziz</h3>
            <h5 className="About--job">Frontend Developer</h5>
            <a className="About--site"></a>
            <div className="About--btn">
                <div>
                <form action="mailto:[email protected]">
                    <button className="Email--btn" ><i className='fa fa-envelope'></i> Email</button>
                </form>
                <div className="About--btn--space"></div>
                <form action="https://www.linkedin.com/in/huzaifah-aziz-63092996/">
                    <button className="Linkedin--btn"><i className='fa fa-linkedin'></i> Linkedin</button>
                </form>
                 </div>
                 </div>
        </div>
    )}

CSS:

* {
    box-sizing: border-box;
   
}
body{
    border-radius: 20px;
    background: #23252C;
    margin: auto;
    width: 100%;
    border: 3px solid #1A1B21;
    padding: 10px;
    font-family: 'Inter', sans-serif;
}

.About--div{
    text-align:center
    
    }

.About--name{
    color: white;
} 
   
.About--job{
    color: #F3BF99;

}

.About--site{
    color: #F5F5F5;

}
.About--btn{
    margin-top: 15px;
}
.About--btn--space{
    width: 17px;
    display: inline-block;
}

.Email--btn{
    background: whitesmoke;
    border: none;
    width: 115px;
    height: 34px;
    border-radius: 5px;
          
}

.Linkedin--btn{
    background: #5093E2;
    border: none;
    width: 115px;
    height: 34px;
    color: white;
    border-radius: 5px;
    
    
}

.fa fa-linkedin{
   
}
fibbz

Using flexbox, all you would need to do is add the following to the parent element of the buttons:

display: flex;
align-items: center;

Add a classname to that div just above your opening form tag and apply to that one. Other guys are right about the form tag being redundant but shouldn't be an issue.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

how can I acheive buttons like these in flutter?

How can I clean up these complex buttons?

Why I can't align two buttons

How can I compare two buttons java

How can I do actions in buttons of a UIAlertView?

How do I line up this text and buttons inside of a Div?

How do I make the buttons line up horizontally?

How can I make my ckEditor menu buttons show up on two rows instead of four?

how can i remove buttons and text like row in css

How can I get answer right under each question I made with two option buttons of right and wrong?

I can't seem to get to get these variables to pop up in excel

How to align left my radio buttons and checkboxes like I can do it easily with paragraphs?

How do I get this footer to line up with the textarea? Flexbox doesn't seem to do it

How can I display my buttons on their own line within a flexbox

How do I get the form to be on the same line as by navigation buttons?

I can't get buttons to toggle a value when they are pressed

How can make the two buttons to be center when I use ConstraintLayout?

How can I vertically align an icon with two buttons?

How can I add a space in between two buttons in a boxLayout?

How can I make space between two buttons in same div?

How can I add two and more buttons in python turtle

How can I increase the distance between two buttons in React?

How can I display two Radio Buttons in the same row?

How can I map over two arrays and return matches as buttons?

How can I set OnClickListener to two buttons in RecyclerView?

How Can I Add Two Buttons In A Row Of ListView Without Overlapping

How can I make two buttons with the same function work?

How do I get a header and two buttons to align properly to a border?

How do I make Glyphicon buttons that don't look like buttons