I want button like a this. but I can not set border or width

Question

I want like a this button but I can not make it

Please tell me that how to make about

I did tryed code

ElevatedButton(
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30)),
backgroundColor: Colors.lightBlue[400],
side:BorderSide(width: 2, color: Colors.black)),

result

https://stackoverflow.com/a/57231317/5598477 Try this one – Jatin Patel Nov 25 '22 at 11:35 — Jatin Patel, Nov 25 '22 at 11:35

score 2 · Accepted Answer · answered Nov 25 '22 at 11:41

Container(
  height: 50,
  width: 200,
  decoration: BoxDecoration(
    color: Color(0xff92fcd1),
    border: Border.all(color: Colors.black),
    borderRadius: BorderRadius.circular(100),
    boxShadow: <BoxShadow>[
      BoxShadow(
        color: Colors.black,
        offset: Offset(2.5, 2.5),
        spreadRadius: 0.1
      )
    ], 
  ),
  child: Center(
    child: Text('LOGIN'),
  )
),

score 2 · Answer 2 · answered Nov 25 '22 at 11:45

Container(
      width: 100,
      height: 30,
      decoration: BoxDecoration(
        border: Border.all(
          width: 1,
          color: Colors.black,
        ),
        color: const Color(0xff93fbd1),
        borderRadius: BorderRadius.circular(15),
        boxShadow: const [
          BoxShadow(
            color: Colors.black,
            blurRadius: 1,
            offset: Offset(1, 2), // Shadow position
          ),
        ],
      ),
      child: TextButton(
        child: const Text(
          'LOGIN',
          style: TextStyle(
              fontStyle: FontStyle.italic,
              color: Colors.black,
              fontWeight: FontWeight.bold),
        ),
        onPressed: () {
          // TODO: button onTap events
        },
      ),
    );

score 0 · Answer 3 · answered Nov 25 '22 at 11:34

I usually create the buttons myself, you can add more features

Card(
    elevation: 8,
    color: Color.fromARGB(255, 132, 255, 199),
    shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15),
        side: BorderSide(width: 2)),
    child: InkWell(
        borderRadius: BorderRadius.circular(15),
        onTap: () {},
        child: Container(
            padding:
                EdgeInsets.only(left: 20, right: 20, top: 10, bottom: 10),
            child: Text(
              "LOGIN",
              style: TextStyle(fontWeight: FontWeight.w700),
            ))),
  )

score 0 · Answer 4 · answered Nov 25 '22 at 11:55

I create this button with complete all of your need, having the box shadow, italic login, responsive design base on device width.

 GestureDetector(
                behavior: HitTestBehavior.opaque,
                onTap: () {},
                child: Container(
                  width: MediaQuery.of(context).size.width * 0.4,
                  height: MediaQuery.of(context).size.height * 0.05,
                  decoration: BoxDecoration(
                    color: const Color(0xff92fcd1),
                    border: Border.all(color: Colors.black),
                    borderRadius: BorderRadius.circular(100),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black.withOpacity(0.7),
                        spreadRadius: 2,
                        offset:
                            const Offset(2, 2), // changes position of shadow
                      ),
                    ],
                  ),
                  child: const Center(
                    child: Text("Login",
                        style: TextStyle(
                            fontStyle: FontStyle.italic, color: Colors.black)),
                  ),
                ),
              )

and here is the result

I want button like a this. but I can not set border or width

4 Answers4