How to create the rounded corner button using css file?_问答_开发者

How to create the rounded corner button using css file?

开发者 https://www.devze.com 2023-03-08 01:45 出处：网络

how to create rou开发者_运维技巧nded corner button using css file and how this css file apply in button.

相关专题：asp.net css

how to create rou开发者_运维技巧nded corner button using css file and how this css file apply in button. please give the css code for that

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/

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!

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

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

See here for demo

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>

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