STAY WITH US

Source Code Of Designing Button Using HTML and CSS

 Source Code Of Designing Button Using HTML and CSS


Note - If you are opening this website to your smart phone. I recommend you to use your phone on desktop mode for better experience.

Designing Button Using HTML and CSS

 Watch the Video - Click me😊

Source Code

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>HTML Button</title>
      <link rel="stylesheet" href="practise.css">
      <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap"
rel="stylesheet"
</head>
<body>
      <input type="button" value="Button" class="button">
</body>
</html>


CSS Code

.button{
    margin-left: 200px;
    margin-top: 100px;
    font-size: 25px;
    font-family: Dancing Script;
    text-shadow: 1px 1px 5px red;
    border-radius: 15px;
    color: red;
    background-color:rgb(94, 223, 255, 0.925);
    cursor: pointer;
}
.button:hover{
     background-color: rgb(229, 255, 0);
}

Conclusion - Share this blog post to your friends and try to add more effects of CSS properties to get your output more awesome.



Post a Comment

0 Comments