带圆角的纯 CSS 彩色按钮

按钮是网页的重要组成部分，因为它们有助于改善整体用户体验。因此，学习如何根据我们的要求定制它们是非常重要的。纯 CSS 帮助我们随时随地创建按钮。

我们可以使用以下 3 个属性来设置按钮的样式。按钮的一些基本属性，例如。悬停，已经被纯按钮类设置样式：

• border-radius： border-radius 属性允许我们对元素的角进行圆角处理。它是border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius的简写/组合。
• 背景颜色：背景颜色属性允许我们将按钮的颜色更改为绿色。我们可以使用 HEX、HSL、RGB、RGBA 或 HSLA 值指定颜色。
• color：颜色属性允许我们改变按钮内文本的颜色。与背景颜色类似，我们可以使用 HEX、HSL、RGB、RGBA 或 HSLA 值指定颜色。

语法：我们可以使用纯 CSS 的纯按钮类创建一个简单的按钮。

 CLICK ME 

接下来，我们将自定义 CSS 样式分组到一个用户定义的类中，然后将该类添加到具有纯按钮类的元素中。

注意：不要忘记添加纯CSS CDN才能使用纯CSS框架

示例 1：假设我们要为欢迎页面创建一个带圆角的绿色按钮。

HTML

  

    
  
    
    
  
    

  

    
Hello Geeks!!!
    
Click the button bellow to begin your learning.
  
    
        CLICK ME
      

  

输出：

浏览器中的欢迎页面

示例 2：我们还可以使用border-radius 属性创建不同形状的按钮。

HTML

  

    
    
  
    
    
    

  

    button1
    button2
    button3
    button4

  

输出：

具有不同边框半径的按钮

注意：始终建议仅将 Html 用于结构化而不用于样式。因此，使用外部 CSS 进行样式设置是一种很好的做法。