CODEWITHSUNDEEP
asp.netcss
hari
hari

Reputation: 59

How to create the rounded corner button using css file?

how to create rounded corner button using css file and how this css file apply in button. please give the css code for that

Upvotes: 4

Views: 27211

Answers (6)

Guest
Guest

Reputation: 11

I think this answer is a lot simpler.

This is the following code used:

<html>
<style>
.btn {
    border-radius: 5px 5px 5px 5px;
    padding: 2px 2px;
    background-color: DarkOliveGreen;
}
</style>
<a href="http://google.com" class="btn">test</a>
<html>

this button is a hyperlink with padding and border radius. Much simpler

Upvotes: 0

vishal choudhary
vishal choudhary

Reputation: 11

Use CSS border-radius property to create rounded corner buttons.

.btn {
   display: inline-block;
   border: 1px solid transparent;
   border-radius: 24px;
   padding: 12px 32px;
   text-align: center;
   cursor: pointer;
   font-size: 1rem;
   color: #fff;
}

.btn-blue  {background-color: #007bff;}
.btn-green {background-color: #28a745;}
.btn-red   {background-color: #dc3545;}
.btn-grey  {background-color: #6c757d;}

/* Change bg-color on mouse over  */
.btn-blue:hover  {background-color: #0069d9;}
.btn-green:hover {background-color: #218838;}
.btn-red:hover   {background-color: #c82333;}
.btn-grey:hover  {background-color: #5a6268;}
<button type="button" class="btn btn-blue">Blue</button>
<button type="button" class="btn btn-green">Green</button>
<button type="button" class="btn btn-red">Red</button>
<button type="button" class="btn btn-grey">Grey</button>

Upvotes: 1

Senthil Kumar Bhaskaran
Senthil Kumar Bhaskaran

Reputation: 7461

use border-radius for IE , -moz-border-radius for Firefox and -webkit-border-radius for safari

#example1 {
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px; }

For Reference http://www.css3.info/preview/rounded-border/

Upvotes: 5

Fermin
Fermin

Reputation: 36111

Use the border-radius CSS property to set this up.

See here for demo

Upvotes: 0

Amit
Amit

Reputation: 22086

Specify the corners you want:

border-top-left-radius: 10px 5px;
border-bottom-right-radius: 10% 5%;
border-top-right-radius: 10px;

Border-radius: create rounded corners with CSS!

Upvotes: 2

RJD22
RJD22

Reputation: 10340

It depends on what you mean with a button. But this is the CSS:

.button {
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
}

Just give your button the class button

Here is some more info on border-radius: Border radius Css3files

Upvotes: 0

Related Questions