Advertisement
Patrikrizek

lesson-7-button

Nov 24th, 2022
723
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 1.39 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Button animation</title>
  8.     <!-- CSS code -->
  9.     <style>
  10.         body {
  11.             padding: 50px;
  12.             background-color: rgb(36, 36, 36);
  13.         }
  14.        
  15.         .button {
  16.             position: relative;
  17.             padding: 20px 50px;
  18.             text-decoration: none;
  19.             font-size: 25px;
  20.             font-family: Arial, Helvetica, sans-serif;
  21.             border: 3px solid #1fe8b6;
  22.             color: #1fe8b6;
  23.         }
  24.  
  25.         .button::before, .button::after {
  26.             content: '';
  27.             position: absolute;
  28.             width: 40px;
  29.             height: 40px;
  30.             border: inherit;
  31.             transition: all .5s;
  32.         }
  33.  
  34.         .button::before {
  35.             top: -15px;
  36.             left: -15px;
  37.             border-width: 3px 0 0 3px;
  38.         }
  39.  
  40.         .button::after {
  41.             bottom: -15px;
  42.             right: -15px;
  43.             border-width: 0 3px 3px 0;
  44.         }
  45.  
  46.         .button:hover::before, .button:hover::after {
  47.             width: calc(100% + 27px);
  48.             height: calc(100% + 27px);
  49.         }
  50.  
  51.     </style>
  52. </head>
  53. <body>
  54.     <a href="#" class="button">Learn more</a>
  55. </body>
  56. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement